Why Are My SVGs Not Scaling Correctly in Internet Explorer?

SVGs failing to scale correctly in IE due to lack of width and height

In this question, the user encountered scaling issues with SVGs in Internet Explorer. The error stemmed from the absence of explicit width and height attributes in the SVGs.

Solution: Providing width and height attributes

To resolve the issue, the user employed a technique discovered by Nicolas Gallagher, which involves using a hidden element to provide the necessary aspect ratio for the SVG.

Implementation:

1. Add a element to the HTML, with its width and height attributes set to match the SVG's size.
2. Hide the using CSS by setting its visibility to hidden.
3. Position the SVG absolutely within the <div> using CSS.

CSS:

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

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

HTML:

<div>

By implementing this workaround, the user successfully resolved the scaling issue in Internet Explorer, allowing the SVGs to display correctly.

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