不保持纵横比的情况下缩放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图片占据整个空间呢？

谢谢和问候,

Neha

- Neha Dangui

Answer 1

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

为了防止 SVG 图形的统一缩放，我们需要添加 preserveAspectRatio 属性，并将其值设置为 "none"。

因此，在文本编辑器中打开你的 SVG 文件，并在 <svg> 标签中添加属性preserveAspectRatio="none"，如下所示：

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

- Milan Švehla

Answer 2

是否有可能将svg图像调整到其完整大小而不保持纵横比？

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

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

在这里，我已经内联设置了width和height属性以及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"/>

- Prajwal