使用纯Javascript动画SVG

Question

我想学习如何使用纯香草JavaScript为SVG创建动画效果。我想让圆圈成长和缩小，同时在每个圆圈的顶部显示一个标签，用一个代表其当前尺寸的值。

索尔到目前为止，我有以下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说：

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

Answer 1

document.getElementsByClassName返回一个不是对象的数组。你的html中也没有名为'red'的类，所以你的脚本返回的数组是= []。一个空阵列。当你调用.style时，你基本上调用[] .style。由于样式不作为数组的属性存在（它是未定义的）。然后尝试获取不存在的属性（.width）（[]。style），这是不可能的，所以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>