跨浏览器SVG preserveAspectRatio

问题描述 投票:23回答:5

我正在尝试在<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比率丢失了。

是否有针对此行为的跨浏览器解决方案?

html5 svg cross-browser
5个回答
37
投票

好像我找到了解决方案:

您需要在SVG中保留widthheight属性。

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

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

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

这似乎无处不在。


6
投票

我通过将以下CSS设置为:

宽度:100%; max-width :( px中的所需宽度)


1
投票

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

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

(我想只添加一条评论,而不是回答,但还没有声明呢:-)


0
投票

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

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

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


0
投票

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

例如

img[src$=".svg"] {
    width:100%;
}
© www.soinside.com 2019 - 2024. All rights reserved.