如何使用相同ID的javascript/typescript访问SVG元素？

如何分别访问使用相同id进行设计的不同SVG元素

例如：-

<g id="A1">
    <g id="light_on"><other tags></g>
</g>
<g id="A2">
    <g id="light_on"></g>
</g>

---

我只想访问A1下包含的元素，而不想访问A2下的元素。在上面的示例中，我只想隐藏打开的灯光的设计，以便图像看起来像关闭的灯光，但我不希望该设计隐藏在A2下的元素中。

您需要使用父级选择器访问它，以区分两者

document.querySelector('#A1 #light_on')
document.querySelector('#A2 #light_on')

---

但是，我建议不要对DOM中的多个元素使用相同的ID。

document.querySelector（'#A1'）。querySelector（'#light_on'）

请提供单独的ID，否则会有问题。但是，您可以将同一个类赋予这两个类。具有重复ID是无效的，请不要这样做。使用类并选择具有相同类的所有元素。按Chrome中的F12键可获得控制台输出。