SVG Überschreiben mit Transparenz

Question

Ich habe dieses svg:

<circle cx="50" cy="100" r="50" stroke-width="0" fill="orange"/> 
<polygon points="0,100, 50,50 100,100" fill="white"/> 

Der Hintergrund ist transparent. Das Polygon überschreibt den Kreis mit weißer Farbe, aber ich möchte, dass dieser Bereich transparent ist (statt weiß). Wie kann ich das machen?

Answer 1

können Sie verwenden fill-rule: evenodd Eigenschaft mit path: s zu "schneiden Löcher", um Ihre Formen:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<path fill="orange" 
     fill-rule="evenodd" 
     d="M50 50 L100 100 L0 100 
     A50 50 0 0 1 100 100 
     A50 50 0 0 1 0 100 z"/> 
</svg>