Я хотел бы применить к моему SVG компоновку целевого объекта, чтобы одна фигура могла "стирать" другие существующие фигуры. Согласно тому, что я прочитал в документации для элемента <feComposition>
SVG , это должно работать, но не дает желаемого результата. Я пытаюсь использовать атрибут in="BackgroundImage"
, чтобы применить мой фильтр ко всему в документе SVG, который встречается до использования фильтра.
<svg viewBox="0 0 100 100">
<filter id="destination-out">
<feComposite in="BackgroundImage" operator="out" />
</filter>
<polyline points="0,25 100,25" stroke="black" />
<polyline points="0,50 100,50" stroke="black" />
<polyline points="0,20 100,60" stroke="black" filter="url(#destination-out)" />
</svg>
Вот jsBin , показывающий, что производит этот код. Я бы хотел, чтобы третью, диагональ <polyline>
, вообще не было видно; вместо этого я хочу, чтобы он «стер» места пересечения первых двух <polyline>
s.
Поддержка устаревших браузеров не важна для моих целей; это просто должно работать в последней версии Chrome.