internet-explorer - 使用 svg 图像在 Internet Explorer 上保持纵横比

Question

我有一个名为 image.scgz 的 svgz 图像，具有指定的宽度和高度。

我想制作一个宽度为 120 像素并保持纵横比的缩略图。

在 chrome 上我只需要写 <img src="image.svgz" style="width:120px;" />

但是它不适用于 ie 9 和 10:

• 首先我要写<img src="image.svgz" style="max-width:120px;" />缩放宽度，我不明白逻辑。

• 其次长宽比没有保持

我见过使用 preserveAspectRatio 的解决方案应答器 svg 的属性，但我不想修改我的图像文件。

Answer 1

您必须使用 SVG <image>元素而不是 HTML <img>元素作为 SVG <image>元素可以采用 html <img> 的 preserveAspectRatio 和 viewBox 属性元素不支持。