SVGの正円について解説！stroke-dasharray、stroke-dashoffsetを使いこなす方法

SVGで「正円」を描く基本

SVGで円を描画するためには、<circle>要素を使用します。
このタグでは、中心座標を表す cx と cy 、円の半径を示す r 、輪郭線の色や太さを表す stroke と stroke-width といった属性を指定することで、ブラウザ上にベクター形式の正円を描くことができます。

SVGはCSSとも親和性が高いため、HTML内に直接記述したSVGに対してもスタイルシートから装飾を加えることが可能です。
また、レスポンシブ対応も簡単にできるので、あらゆるデバイスに柔軟に適応できます。

この基本的な円の描画が、のちにアニメーションを加えるベースとなります。
まずは、正確に円を描くことがアニメーション制作の第一歩です。

属性の解説

• cx, cy円の中心座標（x, y）
• r半径
• stroke線の色（円の輪郭）
• stroke-width線の太さ

SVGで「正円」の実践デモ｜

stroke-dasharrayの基本と役割

stroke-dasharray はSVGの線に対して「描く長さ」と「空白の長さ」を交互に指定するプロパティです。
例えば、stroke-dasharray: 10 5; と指定すれば、「10px線を描いて、5px空ける」というパターンが繰り返されます。

このプロパティは、線を破線として表示するだけでなく、アニメーションの基礎としても非常に重要な役割を果たします。
特に、円の外周（=周長）を計算して stroke-dasharray に指定することで、円を「一筆書きする」ようなアニメーションを作る土台が整います。
円の周長は、2πr（2 × 円周率 × 半径）で求めることができます。
例えば、半径50の場合、周長は約314.15となり、それをstroke-dasharrayに設定することで円全体を描く準備が整うわけです。

stroke-dashoffsetの基本と役割

stroke-dashoffset は、 stroke-dasharray で設定されたパターンの開始位置をずらすためのプロパティです。
これにより、円の描かれ始める位置や、描かれるタイミングを制御することができます。
例えば、stroke-dasharray に周長を指定し、stroke-dashoffset にも同じ値を設定すると、線がすべて非表示になります。
そこから徐々にdashoffsetを0に近づけていくことで、あたかも「線が描かれていく」ようなアニメーションが可能になります。

この仕組みを利用することで、CSSの@keyframesや<animate>タグを用いた簡易的なアニメーションがJavaScript不要で実現できます。
Webパフォーマンスや保守性の観点でも、非常に優れたアプローチです。

正円にアニメーションを加える

ここでは、SVGで描いた正円にアニメーションを加える具体的な手順を紹介します。

まず、<circle> タグで基本的な円を描き、次にその円に stroke-dasharray と stroke-dashoffset を適用します。
周長分の stroke-dasharray を設定し、初期状態で stroke-dashoffset を同じ値にして非表示に。
その後、CSSのanimationプロパティを使用して徐々に0に近づけることで、円が描かれていくような演出が完成します。

この手法は、ページ読み込み時のローディングインジケーターや、時間経過に伴うタイマーUIなど、さまざまなインタラクションに応用できます。
アニメーションのタイミングやイージングもCSSで調整できるため、デザインに合わせた微調整も容易です。

正円の線がだんだん消えていくアニメーションの実践デモ｜

実装例：正円の線がだんだん消えていくアニメーション

HTML

<svg width="300" height="300" viewBox="0 0 300 300">
    <circle
        class="circle"
        cx="150"
        cy="150"
        r="148"
        stroke="#fff"
        stroke-width="2"
        fill="none"
    />
</svg>

CSS

@keyframes draw {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 929.911;
    }
}
.circle {
    stroke-dasharray: 929.911;
    stroke-dashoffset: 0;
    animation: draw 2s ease-out infinite;
}

このコードは、SVGで描かれた正円の周囲の線を、CSSアニメーションで徐々に消していく演出を実現しています。
使用されているプロパティは stroke-dasharray と stroke-dashoffset です。
stroke-dasharray で線のパターンを定義し、stroke-dashoffset に同じ値を設定することで、線を見えなくします。
そして、CSSアニメーションで stroke-dashoffset を0から周長に向かって増やすことで、線が消えていくような動きになります。
このコードでは、円の周長を約 929.911px（半径148px × 2π）として設定しており、アニメーションは2秒で完了し、無限ループします。

半径が148px、strokeが2pxなので、全体で直径300px（148×2 + stroke幅）となり、SVGのサイズとピッタリ一致します。

よくある失敗と調整ポイント

SVGアニメーションを実装する際に初心者がよく陥りがちなミスや、知っておくと便利な調整ポイントをいくつかご紹介します。

周長の誤計算

stroke-dasharray に指定する値が円の周長と一致していないと、描画が途中で止まったり、アニメーションが滑らかでなくなったりします。
JavaScriptで動的に半径から周長を計算して適用する方法もおすすめです。

stroke-widthの調整ミス

線の太さ（stroke-width）が大きいと、視覚的にアンバランスに見えることがあります。
見た目とアニメーションの整合性を取るためにも、太さと全体のサイズ感を意識して設定しましょう。

描画起点のズレ

SVGの円はデフォルトで右（3時方向）から描画が始まります。
円の上側（12時方向）から開始したい場合は、SVG全体を transform: rotate(-90deg) などで回転させることで対応できます。

正円のアニメーションの応用アイデア

stroke-dasharray と stroke-dashoffset の基本的な使い方をマスターしたら、次は応用です。
実際にWeb制作で役立つ活用例をいくつかご紹介します。

• ローディングアニメーション円形の進行アニメーションで読み込み中を可視化
• 円グラフの動的描画データと連動させてグラフの割合を描写
• スキルゲージやスコア表示数値の上昇とともに線が伸びる演出
• ホバーやスクロール連動のエフェクトインタラクティブなUI構築に最適

これらの表現は、SVGの軽量さと柔軟性を最大限に活かしたものです。
JavaScriptと連携させれば、リアルタイムなデータ可視化や条件付きアニメーションも実現可能になります。

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、SVGで正円を描く方法と、stroke-dasharray・stroke-dashoffset を活用したアニメーションの基礎と応用テクニックについて解説しました。

今回のポイントをまとめますと、次のとおりです。

他にもSVGアニメーションに関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

最後までお読みいただきありがとうございました！