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>

只是做一些随机练习来构建我的逻辑和练习脚本。

基本上，我的意思是＆＃34;一个＆＃34;遵循＆＃34;零＆＃34;。零随机移动，并且它的位置被放入存储器/存储一小部分（50ms）然后才能移动。那个人就是要设置到这个位置。相反，我只是得到了＃34; One＆＃34;遵循＆＃34; Zero＆＃34;的运动模式，而不是之前的位置。我很好奇为什么会这样，因为我没有对＆＃34;一个＆＃34;进行任何实际的补充。 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"));

进行这两项改动似乎可以让它做你想做的事情

SVG getAttribute / setAttribute只是添加到坐标而不是“设置”？

1 个答案: