svg - 透明度のある SVG 上書き

Question

私はこのsvgを持っています:

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

背景は透明です。ポリゴンは円を白色で上書きしますが、この領域を (白ではなく) 透明にしたいと考えています。これどうやってするの？

Answer 1

fill-rule: evenodd:s でプロパティを使用pathして、形状に「穴をあける」ことができます。

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