我开始学习一些 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>
最佳答案
您必须确保您使用的是数字而不是字符串:
var x = +(e.getAttribute("x"));
e.setAttribute("x",x+1);
JavaScript 更喜欢字符串“加”到数字，因此当“x”是字符串时，x+1 表示“将字符“1”添加到末尾字符串 x"。通过通过一元“+”运算符将 .getAttribute() 的返回值强制转换为数字，可以避免该问题。
(有多种方法可以强制将字符串转换为数字。选择您最喜欢的:-)
关于javascript - SVG 动画 跳跃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12583182/