我正在尝试在单个 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 滤镜制作这些多重阴影？我看过这个问题 https://stackoverflow.com/questions/14338380/multiple-filters-for-single-object-in-svg这建议将多种效果放入一个过滤器中，但我不确定如何将多种效果合并到一个过滤器中。
谢谢你的帮助！
您可以使用result属性为过滤器原始元素的输出命名，将其视为一种过滤器本地id属性。然后，您可以使用该名称作为过滤器输入in or 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>
See fiddle http://jsfiddle.net/qGUM2/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
