首页 > web前端 > css教程 > 为什么我的 SVG 在 IE9 中缩放不正确,但只有部分缩放?

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

DDD
发布: 2024-10-25 11:25:30
原创
728 人浏览过

Why Do My SVGs Scale Incorrectly in IE9, But Only Some of Them?

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板