はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

SVG1.1 で変形・アニメーション

SVG1.1 で変形・アニメーション

SVG も、CSS3 で扱えるようなtransoformanimate を使うことができます。 それらについて、まとめておきます。

変形(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>

アニメーション

animateanimateTransformanimateMotionの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>