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

Question

如何单独访问不同的SVG元素，这些元素在设计中使用相同的ID。

例如： -

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

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

Answer 1

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

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

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