SVG getAttribute/setAttribute只是添加到坐标中，而不是“设置"? [英] SVG getAttribute/setAttribute simply adding to coordinates instead of "setting"?

问题描述

<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.

基本上，我的意思是让一个"跟随零".零随机移动，它的位置在假定移动之前已放入内存/已存储了一点点(50毫秒).然后将其设置为该位置.取而代之的是，我只是沿零"的移动方式得到一个"，而不是其先前的位置.我很好奇为什么会这样，因为我没有对一个" svg元素做任何实际的添加.

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.

推荐答案

这里有几个问题.

首先，零和一个没有属性开头，因此getAttribute将返回null.将您的标记更改为此即可解决

Firstly zero and one have no attributes to begin with so getAttribute will return null. Changing your markup to this will fix it

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

其次，getAttribute返回一个字符串，因此您需要使用parseFloat从中获取数字，例如

Secondly getAttribute returns a string so you need to use parseFloat to get a number out of it e.g.

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

进行这两项更改似乎可以使其按您的意愿进行操作

Making these two changes seems to make it do what you want

这篇关于SVG getAttribute/setAttribute只是添加到坐标中，而不是“设置"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！