SVGで円グラフを描くシンプルな方法 – KSK-soft.com
このサイトを参考に、SVGで円グラフを作って回しながら表示される動きをつけた。
一つずつの割合ずつアニメーションで出したかったが、とりあえず一度に表示。
See the Pen SVGで円グラフ by himeka223 (@himeka223) on CodePen.
SVGとは
今までSVGは、
- ただどの拡張子よりもきれいに表示できる画像データ
- なんかHTMLみたいなので出来上がってる？
みたいな認識しかなかった。ちゃんと調べてみた。
参考：WEBデザイナーのはじめての「SVG」 - ウェブ企画ラボ
SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータ
イラストレーター用のやつだから、書き出す時イラレでやるのが一番安心だったのか、、、！
SVGデータをWEBで表示させるには
- imgタグで画像として読み込ませる
- インラインで直接HTMLに書き込んで表示させる
今まで私が使ってたのは、imgタグで画像として読み込ませる方法。
今回はインラインで直接HTMLに書き込んで表示させる方法を使い、CSSアニメーションで動かす。
SVGと少し和解できたので、早速かいてみちゃう。
viewBoxとは！？
なんか聞いたことあるけどviewBoxとはなんぞと思ったので調べた
参考：SVGのviewBoxをわかりやすく紐解く
viewBoxを指定することで、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定
言葉のまんまだった。
描画エリアの大きさと要素の場所を決めてるってことにしよう。
ここで気をつけるのは、
SVG自体の要素のwidthとheightと
描画エリアのwidthとheight全く別ということ。
viewBoxは４つの値から指定できる
viewBox="x, y, width, height"
-
xとyは左上からみたx座標とy座標の位置 -
widthとheightは描画エリアの幅(座標値)と高さ(座標値)
なんとなくわかった気がしたので早速かいていく
円グラフを作る
構造
- 円は
svgのcircleタグでかいていく。 - 円の色は、塗りは透明で、線の色をつけ、線を太くし、中心まで線とすることで出だしている。
- 円の割合は円の線を破線として、線分の長さで決めている
- 割合の数の分、円を作り重ねている
circleタグとは
cx="31.8309886184" cy="31.8309886184" r="15.9154943092"
- cx …円のX方向への中心座標
- cy …円のY方向への中心座標
- r …円の半径
ポイント
円弧をパーセンテージで指定し易くする為に、以下の工夫をしてます。
-
円周が100pxになるように逆算し、半径（r）を
15.9154943092にする
<円周を求める公式>
円周{100}=直径{？}×円周率{3.14159265359}
<直径を求めるには>
直径{？}=円周{100}÷円周率{3.14159265359}
直径は31.8309886184となり、半径を15.9154943092となる。 -
円の中心（cx,cy）は、半径の倍の
31.8309886184にしておく -
svgのviewBoxは、見かけ上2倍になった円が収まる様に、半径（r）の4倍の大きさ
0 0 63.6619772368 63.6619772368にする -
扇型は時計で言うと3時の位置から描かれはじめる。円グラフにするなら、12時からの方が良いので、
stroke-dashoffsetを25（1/4回転分）ずらす。 -
svgの大きさをコントロールし易くする為に、svgをdiv等でラップして、ラッパーに幅を指定する。svg自体は、ラッパーの幅に応じて変わるように
padding-bottom trickを使う。
※親要素にpadding-bottomとwidthを同じ大きさにし、子要素をpositionで絶対位置を指定し、width,heightを100%にすることで、親要素の大きさに合わせて子要素は変わる。 -
このように準備した上で、例えば30%の扇形を描きたいなら、
stroke-dasharray=”30,70"とする。
引用：SVGで円グラフを描くシンプルな方法 – KSK-soft.com
自分の言葉で書くのが難しすぎたので、参考サイトの言葉を引用させていただきました。m(_ _)m
circleタグは1つから出来てるわけではなく、割合ごとに円を用意し、線分で割合を決め、重ねている。
割合の計算
sassでは計算ができるのでその機能を使い、1/6等を(100/6)という値にし計算させている。
まとめ
簡易的なまとめになってしまった、、、
SVGについてもまとめも書きたい。