純粋なJavascriptでSVGをアニメーション化する

Question

純粋なバニラのJavascriptを使ってSVGをアニメーション化する方法を学びたいと思っています。私は円を拡大して縮小し、各円の上にその現在のサイズを表す値を表示します。

ソル遠くI以下のSVGを持っている：

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> 
     <path fill="none" d="M-1-1h502v302H-1z"/> 
     <g> 
      <path stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="4.5" stroke="#000" fill="none" d="M39.5 31.5v239M463.5 269.5l-422-1"/> 
      <ellipse stroke="#bf0000" ry="65.5" rx="67" cy="165" cx="158.5" stroke-width="4.5" fill="none"/> 
      <ellipse stroke="#007f00" ry="65.5" rx="67" cy="165" cx="361.5" stroke-width="4.5" fill="none"/> 
     </g> 
     </svg> 

次JSコード：

console.log("DOM Ready!"); 

var redCircle = document.getElementsByClassName('red'); 

var current = 0; 
var destination = 700; 
var friction = 0.04; 


function loop() { 
    console.log(redCircle.style.width); 
    current += (destination - current) * friction; 
    redCircle.style.width = (current * 0.5 + 'px'); 
    if (current >= destination - 0.1) { 
    clearInterval(animation); 
    } 
} 
var animation = setInterval(loop, 20); 

私の問題があると言うにconsole.logのdevのツール：

Uncaught TypeError: Cannot set property 'width' of undefined at loop 

Answer 1

document.getElementsByClassNameはオブジェクトではなく配列を返します。また、あなたのhtmlに 'red'という名前のクラスがないので、スクリプトに返される配列は= []です。空の配列。 .styleを呼び出すと、基本的に[]スタイルが呼び出されます。 styleは配列の属性として存在しないので（未定義です）次に、存在しないもの（[。]スタイル）の属性（.width）を取得しようとします。これは不可能であり、Javascriptでは何もできずにエラーがスローされます。

console.log("DOM Ready!"); 
 

 
var redCircle = document.getElementsByClassName('red'); 
 

 
var current = 0; 
 
var destination = 700; 
 
var friction = 0.04; 
 

 
function loop() { 
 
    // console.log(redCircle[0].style); 
 
    current += (destination - current) * friction; 
 
    redCircle[0].style.width = (current * 0.5 + 'px'); 
 
    if (current >= destination - 0.1) { 
 
    clearInterval(animation); 
 
    } 
 
} 
 
var animation = setInterval(loop, 20);

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" class="red"> 
 
     <path fill="none" d="M-1-1h502v302H-1z"/> 
 
     <g> 
 
      <path stroke-linecap="null" stroke-linejoin="null" stroke-opacity="null" stroke-width="4.5" stroke="#000" fill="none" d="M39.5 31.5v239M463.5 269.5l-422-1"/> 
 
      <ellipse stroke="#bf0000" ry="65.5" rx="67" cy="165" cx="158.5" stroke-width="4.5" fill="none"/> 
 
      <ellipse stroke="#007f00" ry="65.5" rx="67" cy="165" cx="361.5" stroke-width="4.5" fill="none"/> 
 
     </g> 
 
     </svg>