javascript SVG getAttribute/setAttribute 只是添加到坐标而不是“设置”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12784821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG getAttribute/setAttribute simply adding to coordinates instead of "setting"?
提问by Zerkz
<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>
Just doing some random exercises to build my logic and practice scripting.
只是做一些随机练习来构建我的逻辑和练习脚本。
Basically, I mean for the "one" to follow the "zero". The zero moves randomly, and it's position is put into memory /stored a tiny bit (50ms) before it is suppose to move. The one is then meant to be set to this position. Instead, I just get the "One" following the movement pattern of the "Zero", instead of its previous position. I'm curious to why this is, because I am not doing any sort of actual addition to the "one" svg element.
基本上，我的意思是“一”跟在“零”后面。零随机移动，它的位置在它假设移动之前被放入内存/存储一点点（50ms）。然后将其设置为该位置。相反，我只是按照“零”的运动模式得到“一”，而不是它之前的位置。我很好奇这是为什么，因为我没有对“one”svg 元素进行任何实际添加。
回答by Robert Longson
There are a couple of issues here.
这里有几个问题。
Firstly zero and one have no attributes to begin with so getAttribute will return null. Changing your markup to this will fix it
首先零和一没有属性开始，所以 getAttribute 将返回 null。将您的标记更改为此将修复它
<defs>
<text id="zero" x="0" y="0">0</text>
<text id="one" x="0" y="0">1</text>
</defs>
Secondly getAttribute returns a string so you need to use parseFloat to get a number out of it e.g.
其次 getAttribute 返回一个字符串，因此您需要使用 parseFloat 从中获取一个数字，例如
var y = parseFloat(e.getAttribute("y"));
var x = parseFloat(e.getAttribute("x"));
Making these two changes seems to make it do what you want
进行这两个更改似乎使它做你想做的事
