JavaScriptによるSVGアニメーション

JavaScript以外の方法でのSVGアニメーションはこちらをご参照ください。
SVGのアニメーション方法の比較

インラインSVGでのアニメーション

要素作成

html

<svg viewBox="0 0 500 200" width="500" height="200" id="js-wrapper">
</svg>

js

//四角を作成
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

//四角の座標、大きさ、色を指定
rect.setAttribute("x", "10");
rect.setAttribute("y", "10");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "hsl(0,77%,77%)");
rect.id=("rect");

//親要素の取得
const wrapper = document.getElementById("js-wrapper");

//四角を親要素の子にする
wrapper.appendChild(rect);

スタイル変更

svg

<svg viewBox="0 0 500 200" width="500" height="200" id="js-wrapper">
  <rect x="10" y="10" width="100" height="100" fill="hsl(0,77%,77%)" id="rect">
  </rect>
</svg>

js

const rect=document.getElementById("rect");
rect.style.fill="hsl(180,77%,77%)";
rect.style.width=460;

アニメーション

svg

 <svg viewBox="0 0 500 200" width="500" height="200" id="js-wrapper">
   <rect x="10" y="10" width="100" height="100" fill="#e74c3c" id="rect">
   </rect>
 </svg>

js

const rect=document.getElementById("rect");

let time = 0;

const animate=()=>{

  time+=1;

  rect.style.fill=`hsl(${time},77%,77%)`;
  rect.style.width=100+time;

  if(time<=360){
    requestAnimationFrame(animate);
  }
}

animate();

objectでの読み込みのアニメーション

スタイル変更(object)

CSSではobjectタグ内のsvgにアクセスできないので、JavaScriptでスタイルの変更を行います。
(クラスの着脱でのスタイル変更ができません。)

svg.svg

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="500" height="150" viewBox="0 0 500 150">
  <rect x="50" y="50" fill="hsl(0,77%,77%)" width="500" height="500" id="js-rect"/>
</svg>

html

<object id="js-svgObject" data="svg.svg" type="image/svg+xml" width="500" height="150" >
</object>

<p id="js-button">
  push
</p>

注意点

ローカルで実行すると、#document内の要素にアクセスできないのでローカルサーバー等での実行が必要です。
外部svgファイルの読み込みが終わっていない場合も内部にアクセスできません。

js

const button=document.getElementById("js-button");

button.addEventListener("click",()=>{

  const svgObject = document.getElementById("js-svgObject").contentDocument;
  const rect = svgObject.getElementById("js-rect");
  rect.style.fill="hsl(180,77%,77%)";
  rect.style.width=460;

});

アニメーション

svg.svg

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="500" height="150" viewBox="0 0 500 150">
  <rect x="50" y="50" fill="hsl(0,77%,77%)" width="500" height="500" id="js-rect"/>
</svg>

html

<object id="js-svgObject" data="svg.svg" type="image/svg+xml" width="500" height="150" >
</object>

<p id="js-button">
  push
</p>

js

const button=document.getElementById("js-button");
let time = 0;

window.addEventListener('load',()=>{
  const animate=()=>{

    time+=1;

    const svgObject = document.getElementById("js-svgObject").contentDocument;
    const rect = svgObject.getElementById("js-rect");

    rect.style.fill=`hsl(${time},77%,77%)`;
    rect.style.width=100+time;

    if(time<=360){
      requestAnimationFrame(animate);
    }

  }

  button.addEventListener("click",animate);

});