html - SVG 图像没有拉伸(stretch)到指定的大小

Question

我在我的应用程序中使用了 SVG 图像。我想通过指定宽度和高度来拉伸(stretch)图像以适合视口(viewport)。但是，它没有拉伸(stretch)。请查看下面的 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 等。仍然没有运气。

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

Answer 1

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

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

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

所以你真正想要缩放的 SVG 部分是(来自观察) 0,0 到 638.59, 575.42。因此，如果您希望该部分缩放并适合视口(viewport)，您应该将 viewBox 称为 viewBox="0 0 638.59 575.42"

PS: The dimensions 638.59 and 575.42 are just based on the outline observation, I didnt go deeper into path, you will know which dimensions to use as you have better understanding of the path