CSSシークレット ―47のテクニックでCSSを自在に操る

図 3.62 が最終的な円グラフの表示です。このテクニックを使えば、

0％から 10 ％へのアニメーションもより簡単になります。下のコードのよ

うに、 stroke‐dasharrayの値が 0158から 158158へと変 化 す る

CSSアニメーションを記述するだけです。

円周 が 限 り な く 100 に 近 づくように半径を 指 定 す れば、 stroke‐

dasharrayにパーセンテージをそのまま記述でき、面倒な計算が必要な

くなります。 半 径 が r の円 の 円 周 は 2πr なの で、 求め る 半径 の 値は

です。我々の目的に関する限り、切り上げて 16とい

う値を指定してしまってもよいでしょう。また、 widthと heightではな

くviewBox属性を使って SVG のサイズを指定すれば、コンテナ要素のサ

イズに合わせた表示にできます。

図3.62 の SVGにこれらの変更を加えた結果は次のようになります。



svg{

 transform:rotate(‐90deg);

 background:yellowgreen;

 border‐radius:50%;

}

@keyframesfillup{

 to{stroke‐dasharray:158158;}

}

circle{

 fill:yellowgreen;

 stroke:#655;

 stroke‐width:50;

 stroke‐d