SVG 円の輪郭のアニメーション | キプレ - UIサンプル紹介SVGを使って円を描いて、輪郭に沿ったアニメーションをするサンプルです。 このアニメーションはCSSでSVGの属性を操作して、アニメーションを実装しています。 まず、SVGのcircleを用意します。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110" class="demo" > <circle cx="55" cy="55" r="50" class="demo" /> </svg> CSSでSVGのの輪郭を設定して、数値をアニメーションにします。 svg.demo{ margin:20px; width: 200px; display:block; margin:40px; } circle.demo{ fill:none; stroke:#00F; stroke-width:5px; stroke-dashar
