SVGのpathで描画した図形をくり抜く

pathで描画した円形をドーナツ型にくり抜きたいということがあったので、その際に調べたことをメモ。

サンプルコード

pathを使って想定していた形にくり抜いているSVGを見かけたので、そのコードを参考に作成してみます。
まずはうまくいかなかった例です。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#999999" />
  <path d="
    M300,200
    A100,100 0 1 1 100,200
    A100,100 0 1 1 300,200 Z
    M230,200
    A30,30 0 1 1 170,200
    A30,30 0 1 1 230,200 Z"
    fill="red" />
</svg>

参考にしたコードを見た限り、外側の円(4〜6行目)の後に内側の円(7〜9行目)を記述すればいいようだったのですが、このコードの場合はうまくくり抜かれませんでした。
うまくいかなかった場合のデモページ

調べてみると、図形の内側に当たる領域を指定するためのfill-ruleという属性があるようです。
未設定の場合の初期値はnonzeroで、今回の場合は外側と内側のパスを引く方向を逆にすればいいようでした。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#999999" />
  <path d="
    M300,200
    A100,100 0 1 1 100,200
    A100,100 0 1 1 300,200 Z
    M230,200
    A30,30 0 1 0 170,200
    A30,30 0 1 0 230,200 Z"
    fill="red" />
</svg>

円弧の指定の5つ目の引数が1の場合は時計回り、0の場合は反時計回りの描画となるので、内側の円の値を0に変更しました。
pathの内側をくり抜くデモページ

もしくは、fill-rule属性でevenoddを指定する形でも対応できました。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#999999" />
  <path d="
    M300,200
    A100,100 0 1 1 100,200
    A100,100 0 1 1 300,200 Z
    M230,200
    A30,30 0 1 1 170,200
    A30,30 0 1 1 230,200 Z"
    fill="red" fill-rule="evenodd" />
</svg>

pathの内側をくり抜くデモページ2

今回やりたかった内容には合わなかったので見送りましたが、表示のみであればcircleにstrokeを設定する形でも可能です。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#999999" />
  <circle cx="200" cy="200" r="65" stroke="red" stroke-width="70" fill="transparent" />
</svg>

circleで対応するデモページ