Why Aren't My SVGs Scaling Correctly in Internet Explorer?

SVGs not Scaling Properly in IE - has extra space

Problem: When using SVG symbols for responsiveness, the SVGs do not scale properly in Internet Explorer (IE).

Answer: IE has a bug that prevents SVGs from scaling correctly unless both the width and height are specified.

Solution:

Use a trick discovered by Nicolas Gallagher:

1. Add a <canvas> element with the same aspect ratio as the SVG to the &lt;div&gt; containing the SVG.
2. Make the <canvas> invisible with visibility: hidden.
3. Position the SVG absolutely within the &lt;div&gt; and set its width to 100%.

Code:

<div>

CSS:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Note: This trick forces IE to scale the SVG correctly by using the <canvas> as a reference.

The above is the detailed content of Why Aren't My SVGs Scaling Correctly in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!