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

Posted 2023-03-28

【中文标题】当输入不是过滤器对象的一部分时如何使用feComposite？

【英文标题】：How to use feComposite when an input is not a part of the object of the filter?

【发布时间】：2021-11-08 10:25:02

【问题描述】：

<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，我无法指定它的另一个输入。

【参考方案1】：

您需要使用 feImage 和片段标识符将“ani”路径导入过滤器。 （如果您还希望它在 Firefox 中工作，则必须将路径转换为 ​​feImage 中的完整内联 SVG。您可以单独查找如何执行此操作。）此版本应该可以在其他任何地方使用。

<svg  >
<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-/>

<path id="ani-path" d="M 0 0 L 100 50 h 100 L 300 150" stroke="black" stroke- fill="none"/>
</svg>

【讨论】：

我试过你的方法，但是输入输出的缺失让我看不懂，能不能补充一下？

好的，我在过滤器中明确了所有输入和输出。