当输入不是过滤器对象的一部分时，如何使用feComposite ?

Question

<svg>
<style>
#ani{
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
}
#shadow{
filter:url(#Blur);/*omit*/
}
<style>
<script>
document.onclick=()=>{
document.getElementById("ani").atyle="stroke-dashoffset: 0;"
}
</script>
<path id="ani" d="..." />
<line id="shadow" x1y1... /><!--overlapped-->
</svg>

代码的简化版本如上所示，我希望阴影只在#ani重叠时出现，但是如果我在#shadow上使用feComposite，我就不能指定它的另一个输入

Answer 1

您需要导入"路径到您的过滤器使用feImage和片段标识符。(如果您也希望这在Firefox中工作，则必须将路径转换为feImage中的完整内联SVG。您可以单独查看如何操作。)这个版本应该可以在其他地方工作。

<svg width="800px" height="600px">
<defs>
<filter id="overlap-shadow" filterUnits="userSpaceOnUse" >
<feImage xlink:href="#ani-path" x="0" y="0" result="imported-ani"/>
<feComposite operator="in" in="SourceGraphic" in2="imported-ani" result="overlap"/>
<feGaussianBlur stdDeviation="4" in="overlap" result="blurred-overlap"/>
<feComposite operator="over" in="blurred-overlap" in2="SourceGraphic"/>
</filter>
</defs>
<line filter="url(#overlap-shadow)" x1="50" x2="400" y1="50" y2="50" stroke="red" stroke-width="5"/>
<path id="ani-path" d="M 0 0 L 100 50 h 100 L 300 150" stroke="black" stroke-width="5" fill="none"/>
</svg>