如何转a<；圆圈>；（在svg中）放入复选框？

第一部分- 因此，在SVG中有一堆

，我希望这些圆圈成为复选框。然后我想：

第二部分- 单击圆1（现在是一个复选框）时，它将被选中。但是所有其他的圈子现在都没有得到控制

这是我已经尝试过的：

第1部分-将SVG转换为复选框：

<circle opacity="0.5" cx="842" cy="451.814" r="25.582" class="svg_spot" id="1" fill="#FFB60C" >
        <animate attributeName="r" values="25.582; 33; 25.582" keyTimes="0; 0.5; 1" begin="0s"  dur="1s" repeatCount="indefinite" calcMode="linear" />
        <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" value="spot1">   
</circle>

谢谢你们的时间，伙计们。非常感谢您的帮助

不是有效的SVG元素-它是HTML元素，因此无法使用。您可以：

将输入元素包装在

元素中，并以这种方式进行，或者

可以使用定位将输入元素放置在圆上。但是，与其他类型的元素相比，公平的警告表单元素并不总是发挥良好的作用。或

您可以手动绘制看起来像输入元素的SVG，并使用JavaScript使其行为像输入元素。或

既然您只需要一个圆，为什么不将输入元素以适当的边界半径包装在一个Div中，并以这种方式创建一个圆呢

第1部分： 使用

显示SVG中的任何HTML元素：

<foreignObject x="20" y="20" width="100" height="100">
   <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" 
   value="spot1">
</foreignObject>

然后，您可以使用css隐藏此输入字段的默认样式，并将圆放置在其上。您可以在此处阅读：

第2部分：

---

使用单选按钮而不是复选框。复选框允许多个选择。单选按钮是您在这里需要的。在这里阅读：

我希望我能理解你的问题。您不能将svg元素更改为输入，但可以尝试模拟输入

//选择带有一类收音机的所有圆圈
让输入=document.queryselectoral（“.radio”）
//每圈
inputs.forEach（i=>{
//单击圆时
i、 addEventListener（“单击”，（）=>{
//从所有圆圈中删除选中的类，但不删除单击的类
inputs.forEach（j=>{if（i！==j）j.classList.remove（“checked”）}）
//在单击的类上切换选中的类
i、 classList.toggle（“选中”）
})
})

svg{border:1px solid}
.选中{填充：红色}

---

无需任何Javascript即可实现此功能

工作原理：

• 将SVG放在输入的标签中。点击SVG（即标签）将激活该字段
• 将实际的
  字段设置为不可见，以便看到的只是标签
• 使用

  ：checked

  伪选择器，根据是否选择了字段设置SVG的样式

//就在这里证明表单值正在更改
//输入改变时打印点域的值
document.queryselectoral（“#spot1，#spot2，#spot3”）
.forEach（（elem）=>elem.addEventListener（“change”，（evt）=>console.log（document.myform.spot.value））
.common\u选择器{
位置：绝对位置；
不透明度：0；
}
.common_选择器+标签svg{
宽度：50px；
高度：50px；
填充物：红色；
}
.common_选择器：选中+标记svg{
填充：绿色；
}


<foreignObject x="20" y="20" width="100" height="100">
   <input type="checkbox" id="spot1" name="spot" class="common_selector spot_id" 
   value="spot1">
</foreignObject>