使用混合百分比和固定单位维度的SVG过滤器不起作用

我一直在用SVG的一些优点更新一个网站，并取得了很多成就。但是，我一直坚持在SVG形状中添加阴影。代码如下：

<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" x="0px" y="0px" viewBox="0 0 1000 644" enable-background="new 0 0 1000 644" xml:space="preserve">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="10%" stop-color="#ff6102" stop-opacity="1"/>
      <stop offset="90%" stop-color="#f7850a" stop-opacity="1"/>
    </linearGradient>
    <filter id="shadow" y="-10" x="-10" width="85%">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset" />
      <feGaussianBlur in="offset" stdDeviation="10" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1); filter: url(#shadow);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
 <path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
</svg>

如果删除过滤器的代码，形状将显示为精细：

<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" x="0px" y="0px" viewBox="0 0 1000 644" enable-background="new 0 0 1000 644" xml:space="preserve">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="10%" stop-color="#ff6102" stop-opacity="1"/>
      <stop offset="90%" stop-color="#f7850a" stop-opacity="1"/>
    </linearGradient>
  </defs>
  <path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
 <path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
</svg>

如果我只是从style属性

style=“fill:url（#gradient1）；”

中删除对过滤器的引用，效果会很好

---

知道我做错了什么吗？我尝试过：更改中元素的顺序，删除svg中的一个，以及删除linearGradient。没有什么能让它工作。

SVG不喜欢混合单元系统——它远不如CSS宽容。您不能在过滤器维度中混合像素（或严格意义上的userSpaceUnits）和%。如果您更改：

<filter id="shadow" y="-10" x="-10" width="85%">

到

---

过滤器会工作的（虽然我不知道为什么你会选择这些维度）。

就是这样！谢谢你的帮助。我在液体设计中使用%而不是px。

<filter id="shadow" y="-10%" x="-10%" width="85%">