Why do SVG Image Proportions Skew in IE9\'s `` Element?

IE9 Skews SVG Image Proportions in Element

When using CSS to set the maximum height of an SVG image within an element, it is expected that the image will scale proportionately to that height. However, in IE9, certain SVG images may exhibit distorted proportions.

Specifically, the issue arises with SVGs composed of polygons rather than paths. An example of an affected image is the "crocs" SVG from Radiant Interactive: http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

To address this inconsistency across browsers, it is recommended to always define a viewBox for SVG images, while omitting the width and height attributes from the

To demonstrate the impact of different SVG attributes, a test page has been created:

[Test Page Link]

By comparing the results in different browsers, one can observe significant variations in image handling based on the combination of SVG attributes and CSS dimensions.

The above is the detailed content of Why do SVG Image Proportions Skew in IE9\'s `` Element?. For more information, please follow other related articles on the PHP Chinese website!