Применение компоновки в SVG - PullRequest
Новая
       81

Применение компоновки в SVG

1 голос
/ 14 июля 2020

Я хотел бы применить к моему 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.

1 Ответ

2 голосов
/ 15 июля 2020

BackgroundImage не является поддерживаемым типом ввода ни в одном из основных текущих браузеров и устарел для будущих браузеров.

Чтобы выполнить sh то, что вы хотите сделать, вам нужно будет ввести фигуры вы хотите использовать в фильтре как вход SourceGraphi c и форму, которую вы хотите использовать в качестве второго входа через feImage. feImage поддерживает прямые ссылки на фрагменты везде, кроме Firefox, поэтому для получения полной кроссбраузерной поддержки вам нужно будет встроить эту фигуру как отдельный URI данных SVG в свой feImage.

Вот версия, которая работает без Firefox. 

<svg width="100px" height="100px" viewBox="0 0 100 100">
<defs>
  <polyline id="second-shape" points="0,20 100,60" stroke="black" stroke-width="3"/>

  <filter id="destination-out">
   <feImage x="0" y="0" width="100" height="100" xlink:href="#second-shape"/>
   <feComposite in="SourceGraphic" operator="out" />
  </filter>

  </defs>
  <g filter="url(#destination-out)" >
  <polyline points="0,25 100,25" stroke="red" />
  <polyline points="0,50 100,50" stroke="blue" />
  </g>

</svg>
...