【CSS】SVGアニメーションの基礎.1

タグ :

CSS

HTML

WEB DESIGN

以下のサンプルのSVGコードは、アニメーションを使ってSVGオブジェクトを回転させたり、ストロークの色を変化させたりするデザインを作成しています。

1 サンプル
2 SVGの基本設定
3 パスとグループの設定
4 CSSの設定
5 キーフレームアニメーション
6 JSコード部分の解説
7 SVGで使える主なCSSプロパティ

サンプル

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

＊スマートフォン等では、正常な動作をしません。
以下、サンプルのコードの要所についての解説します。

SVGの基本設定



<svg version="1.1" id="mock" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="498.9" height="498.9" style="enable-background:new 0 0 498.9 498.9" xml:space="preserve">

version=”1.1″: SVGのバージョンを指定しています。
id=”mock”: SVG要素にidを設定し、後でCSSやJavaScriptで参照できるようにしています。
widthとheight: SVGの描画領域の大きさを指定しています。
style=”enable-background:new 0 0 498.9 498.9″: 背景のレンダリングを有効にし、表示領域を指定しています。

パスとグループの設定



<g  class="rotate">
  <path class="st0 mock" d="..."/>
  <path class="st0 mock" d="..."/>
  <path class="st1 mock" d="..."/>
  <ellipse transform="rotate(-85.492 236.87 116.64)" class="st2  mock" cx="236.86" cy="116.64" rx="2.16" ry=".99"/>
  <ellipse transform="rotate(-85.492 253.566 115.005)" class="st2 mock" cx="253.56" cy="115.01" rx="2.16" ry=".99"/>
</g>

<g class=”rotate”>: グループ要素で、子要素をまとめて扱えるようにしています。この場合、回転アニメーションを全体に適用するためのグループです。
<path>: ベクターパスで、複雑な形状を定義しています。クラスst0やst1、mockが設定されており、CSSでスタイリングやアニメーションが適用されます。
<ellipse>: 楕円形を描画する要素です。

CSSの設定



.mock{
  stroke: white;
  stroke-width:2px;
  stroke-dashoffset:-2000;
  stroke-dasharray:2000;
  animation:dashrunning 2s ease-in-out forwards;
}
.rotate {
    animation:rotate 40s linear 2.5s infinite;
  transform-origin:50% 50%;
}

.mock: ストローク（線）の色や幅、アニメーションの初期設定を行っています。stroke-dashoffsetとstroke-dasharrayを使って、線の描画を制御しています。
.rotate: 回転アニメーションを適用するクラスです。transform-origin:50% 50%で回転の中心をSVG全体の中央に設定しています。

キーフレームアニメーション



@keyframes dashrunning {
  0%{
    stroke-dashoffset:-2000;
  }
  50%{
    stroke:blue;
  }
  100%{
    stroke-dashoffset:0;
    stroke:purple;
  }
}
  
@keyframes rotate {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

@keyframes dashrunning: 線の描画進行と色の変化を定義しています。アニメーションが進行するにつれて、ストロークが白から青、最後に紫に変化します。
@keyframes rotate: SVG全体を回転させるアニメーションを定義しています。40秒で360度回転し、無限に繰り返します。

これらの要素が組み合わさり、SVGが回転しつつ、線が徐々に描かれ、色が変化するアニメーションが実現されています。

JSコード部分の解説



var path = document.querySelector('path');
var pathLength = path.getTotalLength();
console.log(pathLength);

このコードは、SVG（Scalable Vector Graphics）内のパス（<path>要素）の総長さを取得するために使われます。以下に、コードの各部分の解説をします。

var path = document.querySelector(‘path’);

これは、document.querySelectorメソッドを使って、HTMLやSVGドキュメント内の最初の<path>要素を選択し、その要素をpathという変数に格納します。<path>要素は、SVGでベクター形式のパスを描くための要素です。

var pathLength = path.getTotalLength();

ここで、選択したpath要素の全長を取得しています。getTotalLengthメソッドは、SVGパスの全体の長さを返します。この長さは、パスの始点から終点までの距離（ピクセル単位）です。

console.log(pathLength);

取得したパスの長さをコンソールに出力します。これにより、開発者はパスの長さを確認できます。

SVGで使える主なCSSプロパティ

形状とサイズに関するプロパティ

width: SVGの幅を指定します。
height: SVGの高さを指定します。
viewBox: 内部座標系を定義します（これは属性ですが、SVG全体のスケールを決定するために重要です）。

塗りつぶしと線に関するプロパティ

fill: SVG要素の内部を塗りつぶす色を指定します。
stroke: SVG要素の輪郭線の色を指定します。
stroke-width: 線の太さを指定します。
stroke-dasharray: 破線パターンを指定します。
stroke-dashoffset: 破線の開始位置をオフセットします。オフセットは、stroke-dasharray の合計長さに基づいてストローク全体に適用されます。
stroke-linecap: 線の端の形状を指定します（例: butt, round, square）。
stroke-linejoin: 線が交わる部分の形状を指定します（例: miter, round, bevel）。
stroke-miterlimit:SVG のパスのストロークの角（ジョイン）の形状を制御するための属性です。