IE 11 中的 SVG 高度

Question

我有一個復雜的 HTML 代碼，我在這里簡化了：

<label class="FancyInput">
  <input type="text">
    <svg viewBox="0 0 10 18" class="FancyInputBorder">
        <path d="M-1000,12 L223.166144,12 C217.241379,12 217.899687,12 225.141066,12"></path>
    </svg>
    <svg viewBox="0 0 14 12" class="FancyInputCheck">
        <path d="M1 7 5.5 11 L13 1"></path>
    </svg>  
</label>

<style>
.FancyInputBorder {
    width:1200px;
    height:18px;
    display: inline;
}

.FancyInputCheck {
    width:14px;
    height:12px;
}
</style>

基本上 HTML 在 Chrome 和 IE 11 中的呈現方式不同。所以我刪除了所有不需要的代碼來說明問題。

在 Chrome FancyInputBorder 中確實具有正確的高度，即 18px，但在 IE 11 中卻沒有。

截屏 ：

有人可以幫忙嗎？ 為什么 IE 11 沒有按照要求將 SVG 的高度設置為 18 像素。

謝謝干杯

Answer 1

可能的答案是使用屬性viewbox和preserveAspectRatio 。

<svg viewBox="0 0 1200 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice">
    <defs></defs>
    <g>
        <path d="whatever you have here"></path>
    </g>
</svg>

也可以在 svg 標簽上設置樣式 => style="width:1200px;height:18px;" 但根據我的經驗，在大多數情況下可以忽略這一點。 在大多數情況下，刪除 svg 標簽上的width和height屬性（如果有）。 根據您使用內聯 svg 代碼、CSS 或 img src 的代碼，情況可能會有所不同。

因此，一旦您展示了一些重要的實際代碼，就可以查看一個非常籠統的答案。