SVGアニメーション

svg-animation.png

SVG図形をアニメさせる方法

は3つあります

SVGアニメ作成支援ソフト

Inkscape
Blenderで作ったアニメーションはあくまで3DCG用であって、
SVGに出力してウェブブラウザで見る、なんてことはできない。
Inkscapeでは基本的にSVGのソースをいじってアニメを作ってくれというスタンスのようだ[3]

アニメ要素

animate
animateMotion パスに沿って動かす
animateTransform

animate

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="156" height="156" version="1.1">
<circle cx="100px" cy="100px" r="20px" fill="#A5D9DD" fill-opacity="0.6" stroke="#A5D9DD" stroke-width="3">
   <animate attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px"   repeatCount="indefinite">
</circle>
</svg>

<animate>

属性名
attributeName アニメさせたい属性名
attributeType
begin アニメが始まる時間
dur アニメが継続する時間
from アニメ開始時の属性の状態
to アニメ終了時の属性の状態
repeatCount 繰り返しの数 indefinite:無限に続く
attributeType
CSS アニメさせる対象がCSSの何かの要素の場合これを指定する
XML アニメさせる対象がSVGの中にある場合はこれを指定する
auto これが指定された場合、最初にCSSを探しにいって、次にXML(SVG)要素を探しに行く デフォルト値はこれになっている

パスに沿って動かす

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
 
    <!-- Draw the outline of the motion path in grey, along
         with 2 small circles at key points -->
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
          stroke="lightgrey" stroke-width="2" 
          fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"  />
    <circle cx="110" cy="10" r="3" fill="lightgrey"  />
 
    <!-- Here is a red circle which will be moved along the motion path. -->
    <circle cx="" cy="" r="5" fill="red">
 
        <!-- Define the motion path animation -->
        <animateMotion dur="6s" repeatCount="indefinite">
           <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

Inkscapeでアニメを作るときの注意

親要素が<svg:rect>と書いてあったら、アニメも<svg:animate>にしないと動かない

アニメーション終了後にそのまま留まる

fill="freeze"

開始のタイミング

開始時間を複数指定できる

begin = "4s;6s;8s;9s;11.5s;13s"

ある要素をクリックしたら開始、もできる

begin      = "id名.click"
Bibliography
1. svg要素の基本的な使い方まとめ…このページが最も丁寧でわかりやすかった
3. Inkscape...これを使ってアニメーションは作れますか?….できないと書いてあるけど、できます。このドキュメントは古いです。
: s : smarter svg animaiton

animation svg

サポートサイト Wikidot.com animationsvg