跨浏览器SVG preserveAspectRatio

Question

我正在尝试在<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 时，aspectr比率会丢失。< / p>

是否存在针对此行为的跨浏览器解决方案？

Answer 1

好像我找到了解决方案：

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

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

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

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

这似乎无处不在。

Answer 2

我通过将以下CSS设置为：

来解决它

宽度：100％; max-width :( px中的所需宽度）

Answer 3

我的案例中的解决方案是使用Peter Hudec的答案，但是由于在width: 100%;标记上使用了<img />，这打破了每个非IE9浏览器的布局< / em>，我添加了一个仅IE9的CSS hack（width: 100%\9\0;）。希望这个补充对某人有帮助。 ： - ）

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

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

Answer 4

想到我会添加我如何进入解决方案。我一开始很难搞清楚一些问题。

1. 编辑SVG文件以删除硬编码的高度和宽度属性。 （使用简单的文本编辑器）
2. 将宽度：100％css应用于您的svg图像，以使IE像其他浏览器一样显示它。 （和它的容器一样大）
3. 在图片容器上使用css以获得一致的结果！

我制作了一个页面，在http://ivantown.com/posts/svg-scaling-with-ie/

更详细地描述了它

Answer 5

还有一条附加建议：在您需要对所有svg内容执行此操作并且无法控制标记的情况下，使用基于.svg文件名后缀的属性选择器可能会很有用。

例如

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