跨浏览器 SVG 保留AspectRatio答案

【问题标题】：Cross browser SVG preserveAspectRatio跨浏览器 SVG 保留AspectRatio
【发布时间】：2013-05-02 13:12:09
【问题描述】：

我正在尝试在 <img /> 标记内放置一个 SVG 图形，该图形将适合（不裁剪）在具有保留纵横比的标记内。我在 Inkscape 中创建了 SVG。除了 Internet Explorer 9 之外，它在所有浏览器上都能正常工作。

要使其在 IE 9 上运行，我必须添加 viewBox="0 0 580 220" 和 preserveAspectRatio="xMidYMid meet" 并删除 width="580" 和 height="220" SVG 属性。

<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>

这似乎在任何地方都有效，直到我在 Webkit 上尝试过，<img /> 标签被垂直拉伸，尽管 SVG 的纵横比确实保留了.

当我放回 width="580" 和 height="220" 属性时，它可以在 Webkit 上运行，但在 IE 9 上会丢失纵横比。

是否有针对这种行为的跨浏览器解决方案？

【问题讨论】：

标签： html svg cross-browser

【解决方案1】：

好像我找到了解决办法：

您需要在 SVG 中保留 width 和 height 属性。

<svg
    width="580"
    height="220"
    viewBox="0 0 580 220"
    preserveAspectRatio="xMidYMid meet"
>...</svg>

要使其在 IE 9 上运行，您需要至少指定 <img /> 标记的一个维度。

<img src="your.svg" style="width: 100%" />

这似乎无处不在。

【讨论】：

我在 Windows Phone 8 的 IE10 中使用“max-width: 100%”时遇到了这个问题。将其设置为“width: 100%”也解决了这个问题。谢谢老兄。
实际上，一旦在元素上设置了宽度，就不再需要在 SVG 中设置宽度和高度了。
这对我有用 - 我从 Illustrator 导出的 SVG 设置了高度/宽度 - 与 Magnus 一样，我的问题是最大宽度为 100% - 设置宽度为 100%，它很有魅力.
其实只需要设置viewBox即可。然后，仅当您想在 IE 中缩放图像时。
width: 100% 对我来说是缺失的链接！

【解决方案2】：

我通过将以下 CSS 设置为：

宽度：100%；最大宽度：（以像素为单位的所需宽度）

【讨论】：

为我工作，修复 IE11 中的拉伸问题 - 但如何？

【解决方案3】：

在我的情况下，解决方案是使用 Peter Hudec 的答案，但由于在 <img /> 标记上使用了 width: 100%;，这破坏了每个 非 IE9 浏览器上的布局，我添加了一个 IE9 - 仅 CSS hack (width: 100%\9\0;)。希望这个补充会帮助别人。 :-)

即使使用preserveAspectRatio="xMidYMid meet" 也不是必须的。

（我只想添加评论，而不是回答，但还没有声誉：-）

【讨论】：

【解决方案4】：

只是想我会添加我如何进入解决方案。一开始我很难弄清楚其中的一些问题。

编辑 SVG 文件以删除硬编码的高度和宽度属性。（使用简单的文本编辑器）
应用 width:100% css 到你的 svg 图像，让 IE 像其他浏览器一样显示它。（和它的容器一样大）
在图像容器上使用 css 以获得一致的结果！

我在http://ivantown.com/posts/svg-scaling-with-ie/做了一个页面来更详细地描述它

【讨论】：

【解决方案5】：

只是一个额外的建议：使用基于 .svg 文件名后缀的属性选择器可能在您需要对所有 svg 内容具有此行为且无法控制标记的情况下很有用。

例如

img[src$=".svg"] {
    width:100%;
}

【讨论】：