inkscapeで描いたSVGファイルをJavascriptから操作する

簡単な図形とかをSVGで作成する場合には、<svg>にインラインで直接描画してけばいいですが、複雑なイラストをそこで描くのは難しいです。

そんなときは、illustratorとかinkscapeとかでSVGファイルをあらかじめ作成しとき、それをベースにjavascriptから操作するのが便利です。

今回の記事では、inkscapeで作成したイラストをjavascriptでアニメーションをする方法を調べてみました。

Inkscapeで制御したいオブジェクトにIDをつけておく

inkscapeでイメージを作成するときにjavascriptから制御するオブジェクト毎にIDをあらかじめつけておきます。これを指定しないと、勝手にIDが割り当てられ、制御したい要素をあとで、抽出しづらく、やっかいです。

IDの定義は、inkscape上でオブジェクトを選択し、右クリック->オブジェクトのプロパティから設定できます。

上のような感じで、イラストを三つに分割し、hontai, mimi, moziのIDをそれぞれ割り付けてました。

作成したSVGファイルを開き、htmlファイルにコピペする

inkscapeで作成したSVGファイルが下です。別にこのままでも問題ありませんが、不要な情報を結構含んでいるので、これらを削除しとくと、ファイルサイズを減らせます。

マニュアルで削除してもよいですが、オンラインの圧縮ツールを使えば、SVGを簡単に軽量化できます。今回は、SVGOMGというツールを利用しました。

ツールは基本的にデフォルト設定のままでOKですが、Clean IDsのチェックだけは外しておきます。これをやらないとせっかく設定したIDまで消されてしまいます。

html上にSVGファイルを下のようにコピーします。

animateTransformを使う

svgには、animateTransformという要素があり、これを使えば、<svg>内で簡単なアニメーションを実現できます。コピーしたソースの直下にanimateTransformを追加して、サイの耳をぴくぴくさせてみます。

<svg 
<!-- 略（SVGファイルからコピーしたソース -->
    <animateTransform
    id ="anim"
    xlink:href = "#mimi"
    attributeName = "transform"
    type = "rotate"
    from = "0 75 50"
    to = "10 75 50"
    begin="1s;anim2.end"
    dur = "0.1s"
    repeatCount = "2"
    />

    <animateTransform
    id ="anim2"
    xlink:href = "#mimi"
    attributeName = "transform"
    type = "rotate"
    from = "0 75 50"
    to = "0 75 50"
    begin="anim.end"
    dur = "2s"
    repeatCount = "1"
    />
</svg>

xlink:hrefに動かしたいオブジェクトのIDを指定します。type =”rotate”でオブジェクトを回転させます。from = “初期の角度　回転中心ｘ座標　回転中心y座標” で、to =”最後の角度　回転中心ｘ座標　回転中心y座標” になります。durはfrom から toまでの遷移時間です。

IDのanimが実際の回転で、anim2がインターバルのためにつくったダミーです。anim2はbegin=”anim.end”として、animの動作が終わったら動くようにしてます。animはbegin=”1s;anim2.end”として、anim2が終わるか、ページがロードされて1s後かに動作を始めるようにしています。

javascriptから制御する

同じようなアニメーションはjavascriptからでも実行できます。

getElementByIdで動かしたいオブジェクトを指定して、setAttributeで制御します。

回転の場合は、setAttribute(“transform”, “rotate(角度, 回転中心ｘ座標、回転中心y座標)”)とします。

<script>
var tInterval = 0.05;
var cx = 75;
var cy = 50;
var ang = 0;
var Endang =10;

function rotation(){
  var e =document.getElementById("mimi")
  ang = ang + 2;
  var temp = "rotate("+ ang +","+cx+","+cy+")";
  e.setAttribute("transform", temp);

  if(ang>Endang){
    clearInterval(tim);
    setTimeout(function(){
      ang=0;
      tim=setInterval(rotation, tInterval);
    },1000);
  }
}

var tim=setInterval(rotation, tInterval);
</script>

ピクピクできました。結構、簡単でした。

SVGばんざい。