◆ 外側のパスと反対の回転方向でパスを書くと切り抜ける

三角形のパス

三角形を書く SVG パス
上の頂点が始点で 上→左下→右下→上 の順で線を書いてます

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path d="
M250,200
L200,300
L300,300
z"/>
</g>
</svg>

同じ三角形を 上→右下→左下→上 の順で線を書いてます

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path d="
M250,200
L300,300
L200,300
z"/>
</g>
</svg>

みためはどっちも一緒の三角形です
ですが切り抜きになると違いがありました

切り抜く

四角形を書いてそこからさっきの三角形を切り抜きます

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path d="
M100,100
L100,400
L400,400
L400,100
z

M250,200
L300,300
L200,300
z"/>
</g>
</svg>

黒色の■の中に白色の▲ができます
■は反時計回りで書いて ▲は時計回りで書いてます

これの三角形のパスの順番を逆にしてみると

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path d="
M100,100
L100,400
L400,400
L400,100
z

M250,200
L200,300
L300,300
z"/>
</g>
</svg>

■と▲の両方を反時計回りで書くと 真っ黒の■だけで白色の▲が見えません

両方を時計回りにしてみます

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path d="
M100,100
L400,100
L400,400
L100,400
z

M250,200
L300,300
L200,300
z"/>
</g>
</svg>

これも■だけです

最後は■を時計回りで▲を反時計回りにします

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
<g>
<path d="
M100,100
L400,100
L400,400
L100,400
z

M250,200
L200,300
L300,300
z"/>
</g>
</svg>

こうすると▲が見えます

回転方向で変わる

切り抜くときは逆方向に回転しないといけないみたいです
言われてみれば以前どこかでそんな感じのことを聞いた気がします

ただ調べてみても SVG ってあんまり情報がないんですよね
ググっても illustrator とかの GUI ツールで作る情報ばかりで自分で書くための情報が埋もれてしまってます
特に path とか複雑なのに S とか Q とかのコマンドの意味とかでさえ探すのに一苦労な感じです

ちゃんとした仕様をみるべきなのでしょうけど 長くて複雑なので前提知識ない状態で読むのはつらめです
一応 SVG の Path の部分の仕様の日本語版があったので 軽く流し見して関係ありそうな単語で検索しましたが 回転方向の意味とかは無さげでした
ドーナツみたいなのを複合パスで書けるよ くらいでその詳細は書かれてないようでした
別の部分にあるのかもですが ここにないと探すのも大変なのでこれ以上は調べてません
実際の動きでどうすればいいかはわかりましたし

ただ 単純な形ならともかく複雑な多角形だと回転方向ってどうやって決まるのでしょうか……

【追記】

コメントで inner_river さんから教えていただいた考え方がわかりやすかったです
記事中にもアニメーションする SVG をつけておきました



d 属性に複数のパスを書く場合って 完全に独立した多角形が複数あって 重なったら切り抜かれるって考えでしたけど d 属性全体でひとつの多角形を書いてると考えるのが正解みたいです
アニメーションのように 一筆書きで書いたときに三角形が切り抜きできてる方は三角形の部分を除外して多角形を描いてるので自然と外側になって色がつかないわけです
これがわかると複雑な図形でもどう書けばいいかわかりますね