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()的返回值轉換爲數字，可以避免該問題。

（有各種方法可以強制將字符串轉換爲數字。選擇您的最愛:-)