为什么我的 SVG 在 IE9 中缩放不正确，但只有部分缩放？

IE9 中特定图像的 SVG 比例扭曲

在 img 元素中使用 SVG 时，您可能会遇到意外的缩放问题。在 Internet Explorer 9 中，某些 SVG 可能无法正确缩放，无法保持其原始比例。尽管通过 CSS 指定了 max-height，这种情况仍可能发生。

使用由路径与多边形组成的 SVG 时会出现差异。例如，问题中提到的“crocs.svg”图像无法正确缩放，而“groovy.svg”图像则可以。

解决方案：确保 ViewBox 并省略元素宽度/高度属性

要解决此问题并确保跨浏览器的缩放一致，建议始终在 SVG 元素中指定 viewBox 属性。但是，请将宽度和高度属性留空。

通过这样做，您可以显式定义 SVG 的尺寸，并允许浏览器相应地解释 CSS max-height 属性。它确保在各种浏览器之间的缩放更加一致。

要进一步了解，请参阅此测试页面：[测试页面链接]。本页提供了 SVG 属性与 CSS 宽度和高度规范相结合的各种示例。通过比较不同浏览器中的缩放比例，可以观察这些属性对 SVG 渲染的影响。

以上是为什么我的 SVG 在 IE9 中缩放不正确，但只有部分缩放？的详细内容。更多信息请关注PHP中文网其他相关文章！