在没有纵横比的情况下缩放 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 图像占据整个空间？

感谢致敬，

尼哈

Answer 1

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

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

所以在文本编辑器中打开你的 SVG 文件并添加属性preserveAspectRatio="none"到<svg>标签。喜欢：

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

Answer 2

是否可以在不保持纵横比的情况下使 svg 图像适合其完整尺寸？

是的，如果您设置了 requiredheight和width，它应该会调整大小。除非您需要纵横比，否则可以将其中一个参数保留为auto。

我无法重现您的问题。您可能正在调整内容div而不是img. 我附上了一个示例片段，您可以在下面的片段中重现该问题吗？

在这里，我设置了width& heightin-line & in 属性CSS来调整大小。

.modified{
  height:100px;
  width:200px;
}

<img width="500px" height="300px" src="http://placeholder.pics/svg/150x250/DEDEDE/000000"/>

<img class="modified" src="http://placeholder.pics/svg/150x250/DEDEDE/000000"/>