<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>
只是做一些隨機練習來建立我的邏輯和練習腳本。SVG的getAttribute/setAttribute只是添加到座標,而不是「設置」?
基本上,我的意思是「一」遵循「零」。零點隨機移動,並且它的位置在被假設移動之前被放入內存/存儲一點點(50ms)。那一個是打算設置到這個位置的。相反,我只是在「零」的移動模式之後獲得「One」,而不是之前的位置。我很好奇這是爲什麼,因爲我沒有對「one」svg元素進行任何實際的添加。
使用Javascript的選項是什麼? –