SVGとは

今までSVGは、

みたいな認識しかなかった。ちゃんと調べてみた。

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータ

イラストレーター用のやつだから、書き出す時イラレでやるのが一番安心だったのか、、、！

SVGデータをWEBで表示させるには

今まで私が使ってたのは、imgタグで画像として読み込ませる方法。
今回はインラインで直接HTMLに書き込んで表示させる方法を使い、CSSアニメーションで動かす。

SVGと少し和解できたので、早速かいてみちゃう。

なんか聞いたことあるけどviewBoxとはなんぞと思ったので調べた
参考：SVGのviewBoxをわかりやすく紐解く

viewBoxを指定することで、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定

言葉のまんまだった。
描画エリアの大きさと要素の場所を決めてるってことにしよう。
ここで気をつけるのは、
SVG自体の要素のwidthとheightと
描画エリアのwidthとheight全く別ということ。

viewBox="x, y, width, height"

なんとなくわかった気がしたので早速かいていく

cx="31.8309886184" cy="31.8309886184" r="15.9154943092"

円弧をパーセンテージで指定し易くする為に、以下の工夫をしてます。

円周が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"とする。

自分の言葉で書くのが難しすぎたので、参考サイトの言葉を引用させていただきました。m(_ _)m

circleタグは1つから出来てるわけではなく、割合ごとに円を用意し、線分で割合を決め、重ねている。

sassでは計算ができるのでその機能を使い、1/6等を(100/6)という値にし計算させている。

簡易的なまとめになってしまった、、、
SVGについてもまとめも書きたい。