Html 跨浏览器SVG保存Aspectratio

我试图在

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

为了使其在IE 9上工作，我必须添加

viewBox=“0 580 220”

和

preserveAspectRatio=“xMidYMid meet”

并删除

width=“580”

和

height=“220”

SVG属性

。。。

这似乎在任何地方都有效，直到我在Webkit上尝试了它，其中

标记垂直拉伸，尽管SVG的纵横比确实保留了下来

当我放回

width=“580”

和

height=“220”

属性时，它在Webkit上工作，但在IE 9上，aspectr比率丢失

---

是否有跨浏览器解决方案可用于此行为？

似乎我找到了解决方案：

您需要将

宽度

和

高度

属性保留在SVG中

。。。

要使其在IE 9上工作，您需要至少指定

的一个维度

---

这似乎适用于所有地方。

我通过将以下CSS设置为：

宽度：100%；

---

最大宽度：（px中的desiredwidth）

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

编辑SVG文件以删除硬编码的高度和宽度属性。（使用简单文本编辑器）

将width:100%css应用于svg图像，使IE像其他浏览器一样显示它。（和它的容器一样大）

在图像容器上使用css以获得一致的结果

---

我在

上做了一页更详细的描述，我的案例中的解决方案是使用Peter Hudec的答案，但因为使用了

宽度：100%

标签上，我添加了一个仅限IE9的CSS hack（

宽度：100%\9\0；

），它打破了每个非IE9浏览器的布局。希望此添加内容将对某人有所帮助。：-）

甚至使用

preserveAspectRatio=“xMidYMid-meet”

也不是必需的

---

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

还有一个建议：在所有svg内容都需要这种行为，并且无法控制标记的情况下，使用基于.svg文件名后缀的属性选择器可能很有用

比如说

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

---

我在WindowsPhone8上使用IE10中的“最大宽度：100%”时遇到了这个问题。让它“宽度：100%”也解决了这个问题。谢谢，伙计。事实上，一旦你在元素上设置了宽度，你就不再需要SVG中设置的宽度和高度了。这对我来说很有效——我从Illustrator导出的SVG设置了高度/宽度——就像Magnus一样，我的问题是最大宽度为100%-设置宽度为100%，这很有魅力。实际上，你只需要设置viewBox。然后，只有当你想在IE中缩放图像时。宽度：100%是我丢失的链接！对我来说很有效，解决了IE11中的拉伸问题——但如何解决呢？

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