Why Aren't My SVGs Scaling Properly in Internet Explorer, and How Can I Fix It?

SVGs Not Scaling Properly in IE

Why is this happening?

IE has a known bug where it doesn't scale SVGs properly if both the width and height are not explicitly specified.

How to fix it?

To resolve this issue in IE, a trick discovered by Nicolas Gallagher can be employed. This technique utilizes a element, which IE scales correctly. By placing a with the same aspect ratio as the SVG within the <div> containing the SVG, it forces the SVG to render in the correct size.

Implementation

Here's the updated code with the trick:

<div>

Custom Styling

To position the elements correctly, add the following CSS:

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

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

With these adjustments, the SVG should scale correctly in Internet Explorer.

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