跨浏览器SVG preserveAspectRatio [英] Cross browser SVG preserveAspectRatio
问题描述
我正在尝试在< img />
标记中包含一个 SVG 图形,该标记适合(没有裁剪)保留宽高比的标签。我在Inkscape中创建了 SVG 。除了 Internet Explorer 9 之外,它在所有浏览器上都按预期工作。
I'm trying to have a SVG graphic inside an <img />
tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the SVG in Inkscape. It worked as expected on all browsers except for Internet Explorer 9.
使其在 IE 9上运行我必须添加 viewBox =0 0 580 220
和 preserveAspectRatio =xMidYMid meet
并删除 width =580
和 height =220
SVG 属性。
To make it work on IE 9 I had to add the viewBox="0 0 580 220"
and preserveAspectRatio="xMidYMid meet"
and remove the width="580"
and height="220"
SVG properties.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
这似乎无处不在,直到我在 Webkit 上尝试过,其中< img />
标签被垂直拉伸,但确实保留了 SVG 的宽高比。
This seemed to work everywhere, just until I tried it on Webkit, where the <img />
tag gets stretched vertically although the aspect ratio of the SVG is indeed preserved.
当我放回 width =580
和 height =220
属性,它适用于 Webkit ,但在 IE 9 上,aspectr比率会丢失。
When I put back the width="580"
and height="220"
properties, it works on Webkit but on IE 9 the aspectr ratio is lost.
是否有跨浏览器这种行为的解决方案?
Is there a cross browser solution for this behavior?
推荐答案
好像我找到了解决办法:
Seems like I found the solution:
您需要在 SVG 中保留 width
和 height
属性。
You need to keep the width
and height
properties in the SVG.
<svg
width="580"
height="220"
viewBox="0 0 580 220"
preserveAspectRatio="xMidYMid meet"
>...</svg>
要使其在 IE 9 上运行,您至少需要指定< img />
标记的一个维度。
And to make it work on IE 9 you need to specify at least one dimension of the <img />
tag.
<img src="your.svg" style="width: 100%" />
这似乎无处不在。
这篇关于跨浏览器SVG preserveAspectRatio的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!