SVG的getAttribute/setAttribute只是添加到座標，而不是「設置」？

Question

<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(){step("zero");},1000); 
    setInterval(function(){follow("zero","one");},950); 
} 

function step(e,follower){ 
    e=svgDoc.getElementById(e); 
    var rand = Math.floor((Math.random()*2)+1); 
    var rand2 = Math.floor((Math.random()*2)+1); 
    var move = 10; 
    var y = +(e.getAttribute("y")); 
    var x = +(e.getAttribute("x")); 
    if(rand == 1){ 
     if(rand2 == 1){ 
     e.setAttribute("y",y + move); 
     } else { 
     e.setAttribute("y",y - move); 
     } 
    } else { 
    if(rand2 == 1){ 
     e.setAttribute("x",x + move); 
     } else { 
     e.setAttribute("x",x - move); 
     } 
    } 
} 
function follow(leader, follower){ 
    follower = svgDoc.getElementById(follower); 
    leader = svgDoc.getElementById(leader); 

    var leaderY = leader.getAttribute("y"); 
    var leaderX = leader.getAttribute("x"); 

    follower.setAttribute("y", leaderY); 
    follower.setAttribute("x", leaderX); 
} 

</script> 
<defs> 
    <text id="zero">0</text> 
    <text id="one">1</text> 
</defs> 
<use x="50" y="50" xlink:href="#zero"/> 
<use x="10" y="10" xlink:href="#one"/> 
</svg> 

只是做一些隨機練習來建立我的邏輯和練習腳本。

基本上，我的意思是「一」遵循「零」。零點隨機移動，並且它的位置在被假設移動之前被放入內存/存儲一點點（50ms）。那一個是打算設置到這個位置的。相反，我只是在「零」的移動模式之後獲得「One」，而不是之前的位置。我很好奇這是爲什麼，因爲我沒有對「one」svg元素進行任何實際的添加。

Answer 1

這裏有幾個問題。

首先零和一個沒有屬性開始，所以getAttribute將返回null。您的標記更改爲這將解決它

<defs> 
    <text id="zero" x="0" y="0">0</text> 
    <text id="one" x="0" y="0">1</text> 
</defs> 

其次的getAttribute返回一個字符串，所以你需要使用parseFloat得到了一些出來的如

var y = parseFloat(e.getAttribute("y")); 
var x = parseFloat(e.getAttribute("x")); 

使這兩個變化，似乎讓它做你想做