23

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

为了让它在IE 9上工作，我必须添加viewBox="0 0 580 220"andpreserveAspectRatio="xMidYMid meet"并删除width="580"and height="220" SVG属性。

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

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

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

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

4

5 回答 5

37

好像我找到了解决方案：

您需要将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%" />

这似乎无处不在。

于 2013-05-08T11:49:29.847 回答
6

我通过将以下 CSS 设置为：

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

于 2015-02-25T14:27:08.913 回答
1

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

即使使用preserveAspectRatio="xMidYMid meet"也没有必要。

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

于 2015-11-12T16:20:36.047 回答
0

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

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

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

于 2015-07-23T18:05:41.837 回答
0

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

例如

img[src$=".svg"] {
    width:100%;
}
于 2018-09-05T08:29:13.483 回答