Как использовать 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 перекрывает ее, но если я использую feComposite на #shadow, я не могу указать другой его ввод.

_{Свободный перевод вопроса How to use feComposite when an input is not a part of the object of the filter? от участника @凌世雍.}

Answer 1

Вам нужно будет импортировать "ani" path в ваш фильтр, используя feImage и идентификатор фрагмента. (Если вы хотите, чтобы это работало и в Firefox, вам придется преобразовать путь в полный встроенный SVG внутри feImage. Вы можете узнать, как это сделать отдельно.)

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

_{Свободный перевод ответа от участника @Michael Mullany.}

БЛОГ НА HUSL

Как использовать feComposite, когда вход не является частью объекта фильтра?

Ответы (1 шт):