Animieren von SVG mit reinem Javascript

Question

Ich versuche zu lernen, SVG mit reinem Vanille Javascript zu animieren. Ich möchte die Kreise vergrößern und verkleinern lassen, während oben auf jedem Kreis eine Beschriftung mit einem Wert angezeigt wird, der die aktuelle Größe darstellt.

Sor weit ich habe folgendes 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> 

Die folgende JS-Code:

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); 

Mein Problem ist, dass die Entwickler-Tools console.log sagt:

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

Answer 1

document.getElementsByClassName gibt ein Array und kein Objekt zurück. Außerdem haben Sie in Ihrem html keine Klasse mit dem Namen "rot", daher ist das in Ihrem Skript zurückgegebene Array = []. Ein leeres Array. Wenn Sie .style aufrufen, rufen Sie grundsätzlich [] .style auf. Da Stil nicht als Attribut für ein Array existiert (es ist nicht definiert). Sie versuchen dann, das Attribut (.width) von etwas zu erhalten, das nicht existiert ([]. Style), was unmöglich ist, so dass Javascript nichts anderes tun kann, als einen Fehler zu erzeugen.

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>