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 свойство с path: S "вырезать отверстия" для ваших форм:

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