时间戳

首页 > 解决方案 > SVG 图像未拉伸到指定的大小

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

问题描述

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

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

标签： htmlcsssvg

解决方案

移除 SVG 文件中的宽度并尝试

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

推荐阅读