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中文网其他相关文章!