SVG1.1 で変形・アニメーション
SVG も、CSS3 で扱えるようなtransoform
やanimate
を使うことができます。 それらについて、まとめておきます。
変形(transform)
transform
では、CSS3 とほぼ同じ変形を行える。
使用できる関数を以下にまとめる([]のパラメータは省略可)。
変換名 | 変換関数 |
---|---|
平行移動 | translate(tx, [ty]) tx ty:移動量 |
拡大・縮小・反転 | sale(sx, [sy]) sx, sy:拡大率 |
回転 | rotate(deg, [cx, cy]) deg:回転角[degree] cx, cy:回転中心 |
せん断(横方向) | skewX(deg) |
せん断(縦方向) | skewY(deg) |
変換行列 | matrix(a, b, c, d, e) 行列の要素 |
サンプル
コード
<svg width="300" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="square">
<rect width="50" height="50"></rect>
</symbol>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#fafafa" stroke="#333"></rect>
<use x="0" y="0" xlink:href="#square" fill="#333"></use>
<use x="0" y="0" xlink:href="#square" transform="translate(70,0)" fill="red" ></use>
<use x="120" y="0" xlink:href="#square" transform="scale(1.5, 1)" fill="blue"></use>
<use x="0" y="100" xlink:href="#square" transform="skewX(10)" fill="green"></use>
<use x="100" y="100" xlink:href="#square" transform="skewY(10)" fill="yellow"></use>
<use x="0" y="0" xlink:href="#square" transform="translate(50, 200) rotate(45)" fill="pink"></use>
</svg>
アニメーション
animate
、animateTransform
、animateMotion
の3つでアニメーションできる。
animate
animate
では、attributename
で指定したプロパティをfrom="" to=""
で変化させることができる。 アニメーションにかける時間をdur=""
で指定できる。
また、repeatcount=""
で繰り返し回数を決めることができる。repeatcount="indefinite"で無限に繰り返す。
以下のサンプルでは、attributename="r"
で半径とattributename="fill"
で色の2種類のアニメーションを行っている。
サンプル
コード
<svg width="300" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%" fill="#e33"></rect>
<circle cx="100" cy="100" r="20" fill="#fafafa">
<animate attributetype="XML" attributename="r" from="20" to="80" dur="2s" repeatcount="indefinite"></animate>
<animate attributetype="XML" attributename="fill" from="#fafafa" to="#3333cc" dur="2s" repeatcount="indefinite"></animate>
</circle>
</svg>
animatetransform
transform
でアニメーションを行う場合は、animatetransform
を使う。
また、複数のtransform
を行う場合、additive="sum"
をつける。
以下のサンプルは、平行移動+回転を行っている。
サンプル
コード
<svg width="300" height="100" viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="50" height="50" fill="#cc3">
<animatetransform attributetype="XML" attributename="transform" type="translate"
values="10,10;
250,10;
10,10"
dur="3s" repeatcount="indefinite"/>
<animatetransform attributetype="XML" attributename="transform" type="rotate" from="0 35,35" to="360 35,35" dur="2s" repeatcount="indefinite" additive="sum"/>
</rect>
</svg>
animatemotion
animatemotion
では、path
で指定した軌道でアニメーションを行うことができる。
animatemotion
では、rotate="auto"
で、向きを自動的に計算してくれる。
以下は、pa○man のサンプルです。基本、path
の円弧で描きました(こちら
SVGによる円弧の描画サンプル で計算しました)。 口の動きはanimate
を使ってます。 path=""
で指定したパスに沿って移動し、向きはrotate="auto"
を使用しています。
サンプル
コード
<svg width="400" height="400" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="pacman" viewbox="-100 -100 200 200" >
<path>
<animate attributetype="XML" attributename="d" dur="0.5s" repeatcount="indefinite"
values="M 0,0 l 64,64 a 90 90 45 1 1 0,-128 L 0,0;
M 0,0 l 83,34 a 90 90 22.5 1 1 0,-68 L 0,0;
M 0,0 l 90,0 a 90 90 0 1 1 0,-2 L 0,0;
M 0,0 l 83,34 a 90 90 22.5 1 1 0,-68 L 0,0;
M 0,0 l 64,64 a 90 90 45 1 1 0,-128 L 0,0
"/>
</path>
</symbol>
</defs>
<path stroke="black" fill="none"
d="M 50,50
l 300,0
l 0,300
l -300,0
Z">
</path>
<use x="0" y="0" xlink:href="#pacman" width="100" height="100" fill="yellow" stroke="none" transform="translate(-50 -50)">
<animatemotion rotate="auto" dur="6s" repeatcount="indefinite"
path="M 50,50
l 300,0
l 0,300
l -300,0
Z" />
</use>
</svg>
参考リンク