SVGのpathを使用したアニメーション

2015.11.24

はじめに

SVGでは線の塗りを使用したアニメーションを簡単に実装することができます。
今回は前に書いた記事で取得したパスを使って、それをアニメーションさせてみたいと思います。

ソース

HTML

SVGのパスアニメーションを使用する場合はimg要素で記述するのではなく、HTML内に要素を直接記述します。
画像をSVG形式で保存した後に、テキストエディタで開いて、それをHTML内にコピペします。
今回はpath要素にclassをつけておきます。
なお、Illustratorで保存したSVGデータには不要なタグ等が含まれているので、タスクランナーを使うか、もしくは直接、削除することをオススメします。

SVGではwidthとheightで実際に表示するサイズを決めることができますが、記述がない場合は親要素の大きさに対して可変するオブジェクトになります。
viewBoxは（左上のx座標左下のy座標右上のx座標右下のy座標）を決めるものです。これは実際の表示サイズを決めるものではありません。この辺はかなりややこしいです。

<svg viewBox="0 0 800 500" >
  <path class="demo_svg" d="M347.4,117..省略"/>
</svg>

CSS

SVGはCSSで制御することができます。これは大きな魅力の一つです。
今回のアニメーションも全てCSSを使用して動かしていきます。
使用するプロパティは下記です。

stroke（線の色）
stroke-width（線の幅）
fill（塗りの色）
fill-opacity（塗りの透明度）
stroke-dasharray（線の長さ）
stroke-dashoffset（線の開始位置）

「fill-opacity: 0;」で塗りを透明にしておきます。
「stroke-dasharray: 2000;」で線の長さを2000に設定。
「stroke-dashoffset: 2000;」で線の開始位置を2000ずらします。長さ2000の線を2000ずらすので、画面上に線が表示されていない状態になります。
そして、線の開始位置を0に動かしていくことによって線が描かれていくようなアニメーションになります。
今回は線が描かれたあとに、さらに塗りが塗られるようにしています。
なお、アニメーション後の状態を維持するため「animation-fill-mode: forwards;」は忘れないようにしましょう。

.demo_svg {
  stroke: #000;
  stroke-width: .6;
  fill-opacity: 0;
  -webkit-animation: SVG-anim01 3s 1s ease 1;
          animation: SVG-anim01 3s 1s ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
@-webkit-keyframes SVG-anim01 {
  0% {
    stroke-dashoffset: 2000;
  }
  80% {
    fill-opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    fill-opacity: 1;
  }
}
@keyframes SVG-anim01 {
  0% {
    stroke-dashoffset: 2000;
  }
  80% {
    fill-opacity: 0;
    stroke-dashoffset: 0;
  }
  100% {
    fill-opacity: 1;
  }
}

デモ

デモは「1」と「2」の2種類用意しました。
「1」は自然なアニメーションで、「2」は線の長さと開始位置の値が小さい場合のアニメーションです。
設定する数値を小さくしすぎると「2」のように変なアニメーションになるので注意して下さい。

DEMO

なお、今回はSVGが見れない端末やブラウザに対して何もフォールバックをしていません。

さいごに

SVGはAndroid2系とIE8以下は未対応です。
IE9以上でもSVGのCSSアニメーションには対応していません。（SVGは見れるけどアニメーションが動かない → 初期表示では何も出てない → つまり見れない）
ただ、使用は確実に増えてきており、Photoshop CC 2015からはSVG形式での保存も可能となりました。
フォールバックさえしっかりすれば、一般的に使えるようになってきているのではないでしょうか。
SVGで使用するか否かは、エンジニア側からも積極的に提案していくことになりそうです。