Фильтр feComposite: удаление частей фигур в месте их пересечения

Question

Сделал вот такую фигуру:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <path d="M 50 30 l 20 30 l -40 0 z M 45 45 h 30 v 30 h -30 z M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " fill="#ff0" stroke="#000" stroke-width="1" fill-rule="evenodd"></path>
</svg>

Следом, возникло желание раскрасить элементы фигуры в разные цвета. И тут столкнулся с проблемой: фигура нарисована одним <path> - следовательно, для заливки, можно задать только один цвет, который будет общим для всех элементов.

Я разделил цельную фигуру на отдельные и задал каждой желаемый цвет:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <path fill="#f00a" stroke="#000" stroke-width="1" d="M 50 30 l 20 30 l -40 0 z "></path>
  <path fill="#080a" stroke="#000" stroke-width="1" d="M 45 45 h 30 v 30 h -30 z "></path>
  <path fill="#00fa" stroke="#000" stroke-width="1" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z "></path>
</svg>

Теперь, в местах пересечения фигур, заливка не удаляется, и цвета просто накладываются друг на друга.

Пробовал использовать фильтры <feFlood> и <feComposite> совместно с <feMerge>, но совсем запутался в параметрах...

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <defs>
    <path id="T" fill="#f00a" stroke="#000" stroke-width="1" d="M 50 30 l 20 30 l -40 0 z "></path>
    <path id="R" fill="#080a" stroke="#000" stroke-width="1" d="M 45 45 h 30 v 30 h -30 z "></path>
    <path id="C" fill="#00fa" stroke="#000" stroke-width="1" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z "></path>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#fff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge>
        <feMergeNode in="flood"/>
        <feMergeNode in="comp"/>
      </feMerge>
    </filter>
  </defs>   
  <use xlink:href="#T" filter="url(#xorFlood)" />
  <use xlink:href="#R" filter="url(#xorFlood)" />
  <use xlink:href="#C" filter="url(#xorFlood)" />
</svg>

Штудирование профильных ресурсов, в которых очень сухо всё описано, и попытки подогнать чужие примеры под свою задачу, ясности и понимания не добавили. Хотелось бы разобраться на конкретном примере. (Прозрачность фигур необязательна, но желательна.)

Answer 1

В svg можно сделать заливку одного элемента другим элементом(ами) при помощи тега <pattern>. Не фильтры, конечно, но результат вроде нужный.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
    <defs>
    <pattern id="pattern" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <path fill="#f00a" d="M 50 30 l 20 30 l -40 0 z " />
            <path fill="#080a" d="M 45 45 h 30 v 30 h -30 z " />
            <path fill="#00fa" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " />
    </pattern>
  </defs>
  <path d="M 50 30 l 20 30 l -40 0 z M 45 45 h 30 v 30 h -30 z M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " fill="url(#pattern)" stroke="#000" stroke-width="1" fill-rule="evenodd"></path>  
</svg>

БЛОГ НА HUSL

Фильтр feComposite: удаление частей фигур в месте их пересечения

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