javascript - 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() 的返回值强制转换为数字，可以避免该问题。

(有多种方法可以强制将字符串转换为数字。选择您最喜欢的:-)