SVG の <circle> を <path> で描く

ふと仕事で SVG の <circle> タグの代わりに <path> を使って円を描く必要があったので調べたところ、色んな書き方 (描き方) があるらしいことが分かった。 自分が見つけたのは

1. 2本の円弧で描画
2. 4本の3次ベジェ曲線で描画
3. 8本の2次ベジェ曲線で描画

の3通り。1番目が簡単な上に誤差が無いため通常は1番目を使うはず。 *1

詳しくは以下のページにまとめたのでそちらを参照してください。

SVG の <circle> を <path> で描く

何も考えずに ES6 を使って書いたら最新版の Chrome と Firefox で動いてしまったので ES5 で書き直すモチベーションが失われてしまいました。 すみませんが、うまく表示されなかった場合は Chrome 58.0.3029.110 以上 または Firefox 53.0.3 以上 を使ってください。あしからず。

ちなみに今回 Vue.js を使ってみた。 Angular 1 に似てて使いやすかった。 Angular 1 はこういうちょっとした動きをつけたい時には大仰すぎるし、 Angular や React は環境構築から始めないといけないので CDN 上の .js ファイルを読み込めばすぐ使えるとかじゃないので面倒だし、 その点 Vue.js はコンポーネントもルーターも使わない (vue.min.js のみ) ような今回のケースにもぴったりだった。 プログレッシブに大きなアプリを作る時じゃなくても気軽に使えるので良い。

*1:だけど実際のコードではアレコレの制限でそれも使えなかった…