Why Aren't My SVG Symbols Scaling Correctly in Internet Explorer?

SVG symbols not scaling properly in IE: Additional space

Internet Explorer has a longstanding bug where it improperly scales SVGs without both width and height attributes.

Solution

A solution exists using a trick involving a element, which IE properly scales. Placing a with the same aspect ratio as the SVG within the containing <div> ensures the correct SVG size.

<div>

CSS

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

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

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