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()强制转换为数字，可以避免这个问题。

（有很多方法可以强制将字符串转换为数字。选择你喜欢的： - ）

SVG动画跳跃

1 个答案: