IE 11 中的 SVG 高度

Question

I have a complex HTML code that I simplified here :

<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>

Basically the HTML doesn't render the same way in Chrome and IE 11. So I removed all non required code to illustrate the problem.

in Chrome FancyInputBorder has indeed the right height which is 18px but in IE 11 it doesn't.

Screen shot :

Can anyone help please ? Why IE 11 doesn't set the height of the SVG at 18 px as requested.

Thanks Cheers

Answer 1

Possible answer would be using the attribute viewbox and 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>

It's also possible to set style on the svg tag => style="width:1200px;height:18px;" but in my experience this can be left out in most cases. In most cases, remove the width and height attributes on the svg tag if you have any. Depending on your code using the svg code inline, in CSS or as an img src, things might be different.

So a very general answer which can be reviewed, once you show some actual code that matters.