SVG 图像未拉伸到指定的大小

Question

我在应用程序中使用了SVG图像。我想通过指定图像的宽度和高度来拉伸图像以适合视口。但是，它不是拉伸。请查看下面的 SVG 代码。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="1009" height="577" viewBox="0 0 1009 577">
<defs>
<path id="login-background-b" d="M30,55.176624 L608,55.176624 C624.568542,55.176624 638,68.6080815 638,85.176624 L638,498.176624 C638,514.745167 624.568542,528.176624 608,528.176624 L30,528.176624 C13.4314575,528.176624 0,514.745167 0,498.176624 L0,85.176624 C0,68.6080815 13.4314575,55.176624 30,55.176624 Z"/>
<filter id="login-background-a" width="104.2%" height="105.7%" x="-2.1%" y="-2.9%" filterUnits="objectBoundingBox">
<feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/>
<feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3.5"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.178895323 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(9 .823)">
<path fill="#F0EEEF" d="M155.84305,574.219674 C154.077319,574.494565 152.304536,574.722075 150.526612,574.901961 C95.5786682,580.461447 46.5277046,540.42419 40.9682188,485.476246 L-3.41060513e-13,80.5612139 L511.937215,0.86245338 C513.208541,0.664532341 514.484945,0.50072478 515.76505,0.371207178 C555.327569,-3.63162264 590.644263,25.1952017 594.647093,64.7577215 L638.589181,499.065403 L155.84305,574.219674 Z"/>
<use fill="#000" filter="url(#login-background-a)" xlink:href="#login-background-b"/>
<use fill="#FFF" xlink:href="#login-background-b"/>
</g>
</svg>

我已经尝试了很多方法来解决这个问题，方法是将preserveAspectRatio添加到none并删除视图框等。还是没有运气。

请帮我解决这个问题。 谢谢。。。

Answer 1

您可以从viewBox(参考)中实现所需的内容。

viewBox 指定 SVG 的哪个部分应该显示在视图中，它会相应地缩放 SVG，以便指定的 viewBox 是 SVG 元素(由宽度和高度指定)确定的框中唯一可见的部分

在您的情况下，当您说width=1009 height=577 viewBox="0 0 1009 577"发生的事情是矩形内的视图，顶点为0,0、0,577、1009,577、1009,0缩放以适应宽度 1009 和高度 577。这不会改变任何东西，因为您给出了确切的尺寸。

所以你实际想要缩放的 SVG 部分是(来自观察)0,0到638.59, 575.42.因此，如果您希望该部分缩放并适合视口，则应提及 viewBox 作为viewBox="0 0 638.59 575.42"

PS：维度638.59和575.42只是基于大纲观察，我没有深入路径，你会知道使用哪个维度，因为你对路径有更好的理解

Answer 2

删除 SVG 文件内的宽度并尝试

<filter id="login-background-a" width="104.2%" height="105.7%" x="-2.1%" y=

Answer 3

以下是我创建所需结果的方法。

<filter id="grey_blur">
<feColorMatrix type="matrix"
values=".5   0   0   0   0
0  .5   0   0   0
0   0  .5   0   0
0   0   0   1   0 "/>
<feGaussianBlur stdDeviation="12" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path id="login-background-a" d="M620.792,2096.222c-6.07,0.979-12.163,1.787-18.273,2.426c-188.864,19.772-357.46-122.613-376.569-318.026L85.136,340.612L1844.741,57.177c4.37-0.704,8.756-1.286,13.157-1.747c135.983-14.235,257.372,88.283,271.129,228.979l151.035,1544.54L620.792,2096.222z"/>
<path id="login-background-b" d="M188.251,250.336h1986.673c56.947,0,103.113,47.766,103.113,106.689v1468.763c0,58.924-46.166,106.689-103.113,106.689H188.251c-56.949,0-103.115-47.766-103.115-106.689V357.026C85.136,298.102,131.302,250.336,188.251,250.336z"/>

<use fill="#eeeeee" href="#login-background-a"/>
<use fill="#ffffff" filter="url(#grey_blur)" href="#login-background-b"/>

原来的视框与任何东西都没有关系！创建元素时，它应参考文档的分辨率。我只在8K下工作，因为这是目前可用的最高分辨率，我希望我所有的作品都具有最高质量。

由于很少有人能够使用这种数字显示设备，因此我的解决方案是为4K设计的。2381 2160 viewBox 值表示 4K 显示器的 62% 宽度和 100% 高度。在开始一个项目之前，花点时间学习SVG，它会让你不会半途而废，试图弄清楚如何完成项目。

如果您希望它拉伸以填充视口，请将 preserveAspectRatio="none' 添加到 SVG 文件中，尽管我不明白您为什么要这样做。