SVG：一个过滤器中的多种效果

Question

我正在尝试在单个 SVG 过滤器中实现多个阴影，但我相信我的问题比这更通用：如何将多个效果添加到单个 SVG 过滤器中？ 就我而言，这就是我的具体内容我正在尝试做。

我有一个当前包含单个路径元素的 SVG 文档，并且我已对此路径元素应用了单个阴影效果。

我的 SVG 文档

 <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750">
      <defs>
        <filter id="dropshadow">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"></feGaussianBlur>
          <feOffset dx="12" dy="12" result="offsetblur"></feOffset>
          <feFlood flood-color="rgba(0,0,0,0.5)"></feFlood>
          <feComposite in2="offsetblur" operator="in"></feComposite>
          <feMerge>
            <feMergeNode></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
        </filter>
      </defs>

      <path xmlns:xlink="http://www.w3.org/1999/xlink" d="M 100 100 L 300 100 L 200 300 z z" fill="#2DA9D6" filter="url(#dropshadow)"></path>
    </svg>

这给了我一个看起来像这样的 SVG：

现在，我想向同一个路径元素添加第二个（完全不同的）阴影。例如，假设有一个位于元素左侧上方的阴影。在 CSS 中，我的整个投影可能看起来像：

box-shadow: 5px 5px 5px rgba(0,0,0,0.5), -5px -5px 5px rgba(0,0,0,0.5);

如何使用 SVG 滤镜制作这些多重阴影？我看过this Question，它建议将多个效果放入一个过滤器中，但我不确定如何将多个效果合并到一个过滤器中。

感谢您的帮助！

Answer 1

您可以使用

result

属性为过滤器基元元素的输出命名，将其视为一种过滤器本地

id

属性。然后，您可以使用该名称作为具有

in

或

in2

属性的过滤器输入。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750">
  <defs>
    <filter id="dropshadow">
     <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> 
      <feOffset dx="12" dy="12" result="offsetblur"/>
      <feOffset dx="-20" dy="-12" result="offsetblur2" in="blur"/>
      <feComponentTransfer result="shadow1" in="offsetblur">
        <feFuncA type="linear" slope="0.5"/>
      </feComponentTransfer>
      <feComponentTransfer result="shadow2" in="offsetblur2">
        <feFuncA type="linear" slope="0.2"/>
      </feComponentTransfer>
      <feMerge> 
        <feMergeNode in="shadow1"/>
        <feMergeNode in="shadow2"/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>

  <path xmlns:xlink="http://www.w3.org/1999/xlink" d="M 100 100 L 300 100 L 200 300 z z" fill="#2DA9D6" filter="url(#dropshadow)"></path>
</svg>

参见小提琴。

Answer 2

您可以仅使用 CSS 来实现多个过滤器！对每个过滤器使用一个函数，用空格分隔：

.multiple-different-filters {
  filter: blur(20px) grayscale(20%);
}


.double-dropshadow {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5)) drop-shadow(-5px -5px 5px rgba(0,0,0,0.5));

}

您需要分别为每个阴影调用

drop-shadow()

函数。

来自：https://css-tricks.com/almanac/properties/f/filter/

Answer 3

请注意，根据这个答案，似乎可以简单地通过使用语法

filter="url(#dropshadow1) url(#dropshadow2)"

链接过滤器来组合过滤器。

```
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440" height="1750">
  <defs>
<filter id="dropshadow1" color-interpolation-filters="sRGB">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"></feGaussianBlur>
  <feOffset dx="12" dy="12" result="offsetblur"></feOffset>
  <feFlood flood-color="rgba(0,0,0,0.5)"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
    <feMergeNode></feMergeNode>
    <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
</filter>
<filter id="dropshadow2" color-interpolation-filters="sRGB">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"></feGaussianBlur>
  <feOffset dx="-12" dy="-12" result="offsetblur"></feOffset>
  <feFlood flood-color="rgba(0,0,0,0.5)"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
    <feMergeNode></feMergeNode>
    <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
</filter>
  </defs>

  <path
xmlns:xlink="http://www.w3.org/1999/xlink"
d="M 100 100 L 300 100 L 200 300 z z"
fill="#2DA9D6"
filter="url(#dropshadow1) url(#dropshadow2)">
  </path>
</svg>
```

在这种情况下使用

color-interpolation-filters="sRGB"

似乎至关重要，即使如此，似乎也存在轻微的顺序依赖性，即

filter="url(#dropshadow1) url(#dropshadow2)"

似乎看起来与

filter="url(#dropshadow2) url(#dropshadow1)"

略有不同。我不确定这是否是我尝试过的渲染器中的伪影，或者是预期的效果......