CODEWITHSUNDEEP
htmlcss
Thomas Carlton
Thomas Carlton

Reputation: 5968

SVG height in IE 11

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 :

enter image description here

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

Thanks Cheers

Upvotes: 0

Views: 58

Answers (1)

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

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.

Upvotes: 1

Related Questions