Internet Explorer svg content height

Asked Feb 15 '16 at 16:29

Active Feb 15 '16 at 16:36

Viewed 44 times

I am working on my responsive svg component for my website. I am trying to create svg element that can scale automatically on window resize. I have set up viewBox="0 0 1000 240" and preserveAspectRatio="xMidYMin slice". It works fine in FF, Chrome and Edge but in IE I have an issue. <svg> element height not changing correctly. It always have fixed height.

Here is my code:

<div class="scaling-svg-container">
    <svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice" viewBox="0 0 1000 240" class="scaling-svg">
        <defs></defs>
        <rect x="0" y="0" width="100%" height="100%" fill="#dbf2b5"></rect>
    </svg>
    <h1> This text should be under svg element. But not working in IE</h1>
</div>

http://codepen.io/anon/pen/LGayeZ

How can I avoid this issue?

Thanks

edited Feb 15 '16 at 16:36

asked Feb 15 '16 at 16:29

tagir

1

IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround. The best thing is to set height and width. – Luís P. A. Feb 15 '16 at 16:33
@Paulie_D Thanks for you remark. I have updated my question. – tagir Feb 15 '16 at 16:41
Also check out https://css-tricks.com/scale-svg/ – CBroe Feb 15 '16 at 16:59

Internet Explorer svg content height

0 Answers0