1

我刚开始学习一些 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>
4

1 回答 1

1

您必须确保您使用的是数字而不是字符串：

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

JavaScript更喜欢字符串“addition”而不是数字，所以当“x”是一个字符串时，x+1意味着“将字符 '1' 添加到字符串 x 的末尾”。通过一元“+”运算符将返回值从数字强制.getAttribute()为数字，您可以避免该问题。

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

于 2012-09-25T12:45:18.957 回答