svg – feComposite filter: removing parts of shapes at their intersection

Question:

I made this shape:

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

Next, there was a desire to paint the elements of the figure in different colors. And then I ran into a problem: the figure is drawn with one <path> – therefore, for filling, you can set only one color, which will be common to all elements.

I divided the whole shape into separate ones and gave each the desired color:

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

Now, in places where the shapes intersect, the fill is not removed, and the colors are simply superimposed on each other.

I tried to use filters <feFlood> and <feComposite> together with <feMerge> , but I got completely confused in the parameters…

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

Studying specialized resources, in which everything is described very dryly, and attempts to adjust other people's examples to fit their task, did not add clarity and understanding. I would like to understand a specific example. (Transparency of shapes is optional, but desirable.)

Answer:

In svg , you can make one element fill with another element(s) using the <pattern> . Not filters, of course, but the result seems to be the right one.

<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>
Post Views: 3
Scroll to Top