SVG1.1 SVG 内部でJavaScirpt を動かす

SVG では、内部にJavaSciript(JS) を書くことができます。したがって、animate などよりも複雑なアニメーションなどを行うことができます（その分重くなると思いますが。。）。

SVG 内でのJS の書き方

script タグを使う際は以下のように読み込む。

コード

            

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="100" viewbox="0 0 300 100">
 <defs>
  <script>
   <![CDATA[
    setInterval(function() {
     var cx = Math.floor(Math.random() * 300);
     var el = document.getElementById('cir');
     el.setAttribute('cx', cx);
    }, 1000);
   ]]>
  </script>
 </defs>
 <circle id="cir" cx="30" cy="50" r="30" fill="#c33" />
</svg>

サンプル

onload="" の中にJavaScirpt の処理を書くこともできる。以下にサンプルを。

コード


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" onload="
 <!-- JavaScript処理 -->
 ">
</svg>

JS の書かれたSVG ファイルを読み込む際の注意

インラインのSVGを読むこむ際は問題ありませんが、 JS の書かれたSVG ファイルをを読むこむ際は注意が必要です。

<img src="XXX.svg"> で読む込んでもJS は実行されません。そのため、object タグを使用します。サンプルコードを以下に。

        

<object type="image/svg+xml" data="XXX.svg"></object>

サンプル

onload="" を使って読み込んだ際のサンプルです。 3秒おきにランダムにcircle の色(fill)、位置(cx, cy)と半径(r)を変えて描画しています。

コード

        

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="600" height="300" viewBox="0 0 600 300" onload="
  draw();
  function draw(){
    var c = document.getElementsByClassName('cir');
    for(var i=0; i&lt;c.length; i++){
      c[i].setAttribute('cx', r(100)+'%');
      c[i].setAttribute('cy', r(100)+'%');
      c[i].setAttribute('r', r(15)+'%');
      c[i].setAttribute('fill', 'rgb(' + r(255) + ',' + r(255) + ',' + r(255) + ')' );
    }
    setTimeout(function(){
      draw();
    }, 3000);
  }
  function r(n){
    return Math.floor(Math.random() * (n + 1));
  }
">
  <rect width="600" height="300" fill="#fafafa"></rect>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
  <circle class="cir" cx="100%" cy="100%" r="10%" fill="white"></circle>
</svg>