跨浏览器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屋！