javascript - 使用 JavaScript 与 SVG 元素交互

Question

我什至能够添加 listen to the squares，即在点击时提醒“这是我的名字”。

我的问题是:我需要执行 animate 函数，而不只是发出警报，以便每个项目在单击时开始移动

var NS="http://www.w3.org/2000/svg";     
var SVG=function(h,w){
    var svg=document.createElementNS(NS,"svg");
    svg.width=w;
    svg.height=h;
return svg;
}
var svg=SVG(1200,1500);
document.body.appendChild(svg);


var rect=function(x,y,h,w,fill,name){
    var SVGObj= document.createElementNS(NS,"rect");
    SVGObj.x.baseVal.value=x;
    SVGObj.y.baseVal.value=y;
    SVGObj.width.baseVal.value=w;
    SVGObj.height.baseVal.value=h;
    SVGObj.setAttribute("height",h);
    SVGObj.style.fill=fill;
    SVGObj["my-name"] = name;
    SVGObj.name = name;
return SVGObj;
}


for (var i = 0; i < 100; i++) {
    var x = Math.random() * 500,
        y = Math.random() * 300;
  
    var r= rect(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16),'this is my name');
    r.addEventListener('click', ()=>alert(r.name));  // or r["my-name"]
    svg.appendChild(r);
}

var animate=function(obj){
    obj.x.baseVal.value+=1;
    obj.y.baseVal.value+=1;
 }

Answer 1

要使其正常工作，您应该将事件传递给回调函数，然后使用 event.target 获取被点击的元素。

您的初始代码不起作用的原因是您传递了未包含在任何函数范围内的 r 变量，因此在您实际单击矩形 r 时总是等于最后添加的元素。为避免将来出现这种情况，您应该阅读 closures和 hoisting

var NS="http://www.w3.org/2000/svg";     
var SVG=function(h,w){
    var svg=document.createElementNS(NS,"svg");
    svg.width=w;
    svg.height=h;
return svg;
}
var svg=SVG(1200,1500);
document.body.appendChild(svg);


var rect=function(x,y,h,w,fill,name){
    var SVGObj= document.createElementNS(NS,"rect");
    SVGObj.x.baseVal.value=x;
    SVGObj.y.baseVal.value=y;
    SVGObj.width.baseVal.value=w;
    SVGObj.height.baseVal.value=h;
    SVGObj.setAttribute("height",h);
    SVGObj.style.fill=fill;
    SVGObj["my-name"] = name;
    SVGObj.name = name;
return SVGObj;
}


for (var i = 0; i < 100; i++) {
    var x = Math.random() * 500,
        y = Math.random() * 300;
  
    var r= rect(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16),'this is my name');
    r.addEventListener('click', (e)=>animate(e));  // or r["my-name"]
    svg.appendChild(r);
}
var animate=function(e){
    e.target.x.baseVal.value+=1;
    e.target.y.baseVal.value+=1;
 }