[SVG]ドーナツ状のcircleを描画する。

最終更新日

先日の勉強会にて「重ねたcircleの途中の色だけ変えたい」という質問があり、その場では詳しい方法を答えることができなかったので、記事にて回答します。

複数のcircleを重ねて色を変えた場合、透過処理を行うと下のcircleの色と重なってしまいます。
svg mask

これを回避する方法はいろいろあるのですが、一番簡単な方法はmaskを使う方法です。
(質問には「クリップパスでできると思います」と答えた気がするのですが、すみません私の勘違いでした。クリップパスは「表示したい部分を切り取る」だけなので、Maskを使う必要があります)

サークルをMaskを使ってドーナツ状に変形することで、重ねたときに色が重ならなくなります。

Mask機能を使ってドーナツ状のcircleを表示する

D3.jsを使てドーナツ状のcircleを重ねるサンプルです。
データセットの数に合わせてmask要素を追加します。

example