为什么 SVG 图像比例在 Internet Explorer 9 中有所不同？

Internet Explorer 9 中的图像比例缩放问题

SVG 图像在 Internet Explorer 9 中经常以意外的比例显示，即使使用 CSS 指定最大高度也是如此。在比较各种 SVG 文件的行为时，这种差异变得很明显。

例如，假设我们有一个 SVG 图像，其自然尺寸为 200px x 200px，CSS 中定义的最大高度为 30px：

<code class="css">img {
    max-height: 30px;
}</code>

在大多数浏览器中，此 SVG 图像按比例缩放至 30 像素的高度。但是，在 Internet Explorer 9 中，它可能会显示为 30x200 像素。

此问题似乎与所使用的 SVG 元素的类型有关。在有问题的 SVG 中，图像由多边形组成，而在正确缩放的 SVG 中，图像由路径组成。

为了确保跨浏览器的缩放一致，建议始终指定 viewBox 但不要指定SVG 元素的宽度和高度属性。通过遵循此做法，您可以提高 SVG 图像在 Internet Explorer 9 和其他浏览器中的兼容性。

以上是为什么 SVG 图像比例在 Internet Explorer 9 中有所不同？的详细内容。更多信息请关注PHP中文网其他相关文章！