为什么我的 SVG 图像在 IE9 中会变形？ ViewBox 的作用和一致的缩放。

IE9 中的 SVG 图像比例和 ViewBox 的作用

在 中使用 SVG 图像时元素，期望在缩放时保持图像的自然比例。但是，在 IE9 中，此行为可能会因 SVG 文件的结构而异。

问题：
某些 SVG，特别是由多边形组成的 SVG，无法在 IE9 中按比例缩放当包含在 中时设置了 max-height CSS 属性的元素。这会导致图像拉伸或扭曲。

原因：
包含多边形和路径的 SVG 之间的缩放行为差异归因于视图中是否存在 viewBox 属性。 SVG 文件。

解决方案：
为了确保跨浏览器的一致缩放，建议始终在 SVG 文件中指定 viewBox 属性。该属性定义 SVG 图像的坐标空间。通过保留

示例：
以下代码演示了此解决方案：

<code class="xml"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
<polygon points="..."></polygon>
</svg></code>

通过合并viewBox、IE9 和其他浏览器将一致地缩放 SVG 图像，同时保持其纵横比，无论是否存在多边形或路径。

以上是为什么我的 SVG 图像在 IE9 中会变形？ ViewBox 的作用和一致的缩放。的详细内容。更多信息请关注PHP中文网其他相关文章！