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

【问题标题】：SVG image is not stretching to the size specifiedSVG 图像未拉伸到指定的大小
【发布时间】：2019-08-13 05:52:39
【问题描述】：

我在我的应用程序中使用 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 并删除 view box 等。仍然没有运气。

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

【问题讨论】：

您可以使用此viewBox="-10 0 660 577" 并删除宽度和高度属性。同时从组中删除transform="translate(9 .823)"。为了获得组的大小，您可以使用 the_group.getBBox() 其中 the_group 代表组。这将返回组的位置 (x,y) 和大小 (width,height)，您可以使用它来定义 viewBox 的值
How to scale SVG | CSS-Tricks

标签： html css svg

【解决方案1】：

您可以通过 viewBox (reference) 实现您想要的。

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只是根据轮廓观察，路径我没有深入，大家对路径了解比较清楚就知道用哪个维度了

【讨论】：

@AvsC，当使用 viewBox="0 0 1009 577" 时，为什么实际内容水平居中对齐而不是在开头。请帮我理解。

【解决方案2】：

去掉SVG文件里面的宽度试试

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

【讨论】：

还有 width="1009" height="577" 应该是“100%”。您可以将宽度和高度设置为外部 div。
最好删除 with 和 height inline 并添加你想要的 css 类。

【解决方案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"/>

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

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

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

【讨论】：