跨浏览器SVG preserveAspectRatio

Question

我正在尝试在标签内部放置一个SVG图形,该<img />标签适合(没有裁剪)标签内保留的纵横比.我在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比率丢失了.

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

Answer 1

好像我找到了解决方案:

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

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

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

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

这似乎无处不在.

我在Windows Phone 8上的IE10中使用"max-width:100%"时遇到此问题.使用"width:100%"解决了问题.谢了哥们. (3认同)

Answer 2

我通过将以下CSS设置为:

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