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

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

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

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>