如何使用javascript动态获取和设置SVG元素的ID

所以我想设置并获取我创建的SVG元素的ID。当我试图使用document.getElementByID（）获取SVG元素时，我这样做的方式不起作用。我的主要目标是最终实现一种方式，通过这种方式，我可以看到哪个元素被拖到另一个元素上，这样我就可以相应地更改形状的颜色。谢谢你的帮助

const SVG\u NS=http://www.w3.org/2000/svg';
设Y=1450；
//创建左下角的行
for（设i=1；i<12；i++）{
设x=21+i*49；
拉丝圈（{cx:x，cy:Y，r:20}，圈_座，i）；
drawText（{props:{x:x，y:y}，txtContent:i}，circle_seats）；
}
//创建右下角的行
对于（i=12；i<23；i++）{
设x=21+i*49；
拉丝圈（{cx：（x+49*5），cy:Y，r:20}，圈_座，i）；
drawText（{props:{x:{x+49*5），y:y}，txtContent:i}，圆形座位）；
}
Y=1400；
//创建左上方的行
for（设i=1，j=23；i<15；i++，j++）{
设x=21+i*49；
拉丝圈（{cx:x，cy:Y，r:20}，圈_座，i）；
drawText（{props:{x:x，y:y}，txtContent:j}，circle_seats）；
}
//创建右上角的行
对于（i=12，j=37；i<27；i++，j++）{
设x=21+i*49；
拉丝圈（{cx：（x+49*5），cy:Y，r:20}，圈_座，i）；
drawText（{props:{x:{x+49*5），y:y}，txtContent:j}，圆形座位）；
}
函数drawCircle（o、父函数、a）{
var circle=document.createElements（SVG_NS，'circle'）；
for（o中的变量名称）{
如果（o.hasOwnProperty（名称））{
circle.setAttributeNS（null，name，o[name]）；
circle.id=“座椅”+a；
}
}
父、子（圆）；
返回圈；
}
函数drawText（o，父级）{
var text=document.createElements（SVG_NS，“text”）；
for（o.props中的变量名称）{
如果（o.props.hasOwnProperty（名称））{
setAttributeNS（null，name，o.props[name]）；
}
}
text.textContent=o.txtContent；
父.子（文本）；
返回文本；
}
//矩形板函数
函数drawText_板（o，父级）{
var text=document.createElements（SVG_NS，“text”）；
for（o.props中的变量名称）{
如果（o.props.hasOwnProperty（名称））{
setAttributeNS（null，name，o.props[name]）；
}
}
text.textContent=o.txtContent；
text.style.fontSize=“17px”；
父.子（文本）；
返回文本；
}
var svgns=”http://www.w3.org/2000/svg";
函数drawRectangle（o、父级、a）{
var rectangle=document.createElements（svgns，'rect'）；
for（o中的变量名称）{
如果（o.hasOwnProperty（名称））{
setAttributeNS（null，name，o[name]）；
矩形.setAttribute（“id”、“座位”+a）；
}
}
parent.appendChild（矩形）；
返回矩形；
}
Y=100；
设X=25；
绘图矩形（{x:x，y:y，宽：100，高：50}，铭牌，i）；
drawText_板（{props:{x:x+90，y:y+25}，txtContent:1}，名称_板）；
拉丝圈（{cx:X+10，cy:Y+25，r:5}，铭牌，1）；
for（设i=2；i<51；i++）{
X=X+100+10
如果（i%13==0）{
X=25；
Y=Y+55；
}
绘图矩形（{x:x，y:y，宽：100，高：50}，铭牌，i）；
drawText_板（{props:{x:x+90，y:y+25}，txtContent:i}，name_板）；
拉丝圈（{cx:X+10，cy:Y+25，r:5}，铭牌，i）；
}
//名称标签函数
函数drawText\u name\u标记（o，父级）{
var text=document.createElements（SVG_NS，“text”）；
for（o.props中的变量名称）{
如果（o.props.hasOwnProperty（名称））{
setAttributeNS（null，name，o.props[name]）；
}
}
text.textContent=o.txtContent；
text.style.fontSize=“10px”；
父.子（文本）；
返回文本；
}
//创建名称标签
Y=400；
X=25；
drawRectangle（{x:x，y:y，宽度：100，高度：50}，名称标签，i）；
drawText_name_标记（{props:{x:x+50，y:y+25}，txtContent:“BLANK”}，name_标记）；
for（设i=2；i<2；i++）{
X=X+100+10
如果（i%13==0）{
X=25；
Y=Y+55；
}
drawRectangle（{x:x，y:y，宽度：100，高度：50}，名称标签，i）；
drawText_name_标记（{props:{x:x+50，y:y+25}，txtContent:“BLANK”}，name_标记）；
}
函数更改\u名称（事件）{
变量名称=提示（“输入新名称（最多20个字符）：”；
而（name.length>20）{
名称=提示（“输入新名称（以前超过20个字符）”；
}
如果（name！=null&&name！=“”）{
event.target.textContent=名称；
}
}

文本{
填充：黑色；
字体系列：Verdana；
字号：28px；
笔画：黑色；
优势基线：中等；
文本锚定：中间；
}
圈{
填充：url（#绿色）；
笔画：黑色；
}
直肠{
填充：url（#灰色）；
笔画：黑色；
}

---

为了画一个圆，您正在使用此功能：

函数drawCircle（o，父级）{
var circle=document.createElements（SVG_NS，'circle'）；
for（o中的变量名称）{
如果（o.hasOwnProperty（名称））{
circle.setAttributeNS（null，name，o[name]）；
//circle.id=“座椅”+a；
}
}
父、子（圆）；
返回圈；
}

正如您可能看到的，我已经注释掉了一行代码，您尝试设置id的代码。您不需要这一行。创建新圆时，可以执行以下操作：

drawCircle({cx:(x+49*5), 
            cy:Y,
            r:20,
            id:"seat"+i},circle_seats); 

现在您的id已经设置好，可以使用

document.getElementByID（）

更新 这是您的代码，但我删除了一些您不需要的函数。因为不能重复

id

s，所以我通过添加左上

tr

来命名它们，左下

bl

。。。而不是

座椅

这很重要：表示属性的特异性非常低，并且被css声明覆盖。要更改css中设置的填充，需要添加css规则：

document.getElementById（“bl1”）.setAttribute（“样式”，“填充：红色”）；

const SVG\u NS=”http://www.w3.org/2000/svg";
设Y=1450；
//创建左下角的行
for（设i=1；i<12；i++）{
设x=21+i*49；
抽绳圈（{cx:x，cy:Y，r:20，id:“bl”+i}，圈_座位）；
drawText（{props:{x:x，y:y}，txtContent:i}，circle_seats）；