SVG动画跳跃

Question

我刚刚开始学习一些SVG（和javascript，我想），并且我很难理解为什么这不流畅。 0移动一小部分（大概是“x”轴上的“1”），但是开始跳跃很大。这是因为我使用的浏览器（Chrome）刷新/重绘速度更快吗？任何投入将不胜感激。

<svg width="100%" height="100%" 
    xmlns="http://www.w3.org/2000/svg" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    onload="startup(evt)"> 
<script> 
function startup(evt){ 
    svgDoc=evt.target.ownerDocument; 
    setInterval(function(){ 
    e=svgDoc.getElementById("zero"); 
    var x = e.getAttribute("x"); 
    e.setAttribute("x",x+1); 
    },1000); 
} 
</script> 
<defs> 
    <text id="zero">0</text> 
</defs> 
<use x="40" y="20" xlink:href="#zero"/> 
</svg> 

Answer 1

你必须确保你正在使用数字和字符串不工作：

var x = +(e.getAttribute("x")); 
e.setAttribute("x",x+1); 

的JavaScript 喜欢字符串“加法”，以数字，因此，当“X”是一个字符串，x+1意味着“将字符'1'添加到字符串x”的末尾。通过使用一元“+”运算符强制将.getAttribute()的返回值转换为数字，可以避免该问题。

（有各种方法可以强制将字符串转换为数字。选择您的最爱:-)