SVG の <circle> を <path> で描く
ふと仕事で SVG の <circle> タグの代わりに <path> を使って円を描く必要があったので調べたところ、色んな書き方 (描き方) があるらしいことが分かった。 自分が見つけたのは
の3通り。1番目が簡単な上に誤差が無いため通常は1番目を使うはず。 *1
詳しくは以下のページにまとめたのでそちらを参照してください。
何も考えずに 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:だけど実際のコードではアレコレの制限でそれも使えなかった…