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过滤器执行这些多重阴影？我已经看过这个问题,建议将多个效果放到一个过滤器中,但我不确定如何将多个效果合并到一个过滤器中.

谢谢你的帮助!

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>

看小提琴.