html - 缩放没有纵横比的 SVG 图像

Question

是否可以在不保持纵横比的情况下将 svg 图像调整为完整尺寸？在下面的示例中，

<img style="position: absolute; top: 12px; left: 31px; z-index: 1; width: 196px; height: 265px; " src="/media/images/logo.svg" />

svg 图像居中，在其两侧添加了一些透明空间。如果我增加图像的大小，svg 图像会按比例增加，但不会占用整个空间，而是透明空间的大小会增加。有没有办法让 svg 图片占据整个空间？

谢谢并恭祝安康，

内哈

标签： htmlcsssvg

Answer 1

我在这篇文章的帮助下解决了同样的问题。对您来说重要的部分是：

为了防止 SVG 图形的统一缩放，我们需要添加值为“none”的 preserveAspectRatio 属性。

因此，在文本编辑器中打开您的 SVG 文件并将属性preserveAspectRatio="none"添加到<svg>标记中。喜欢：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">