通过javascript访问SVG使用元素子节点/链接节点

我想要什么

我需要动态操作使用元素内容。你知道-更改它的子树属性/结构或附加事件处理程序等等。访问它的defs引用并不相同，因为它只会告诉我一些关于原型结构的信息，而对连接到shadowRoot的实际使用内容实例没有任何作用

问题

不知怎的，这在现代浏览器（ie除外）中无法实现，或者我错过了一些东西

我尝试的

在阅读了之后，我尝试使用SVGUseElement.instanceRoot，甚至shadowRoot，但在现代浏览器中，SVGUseElement实例（除ie11外）缺少所有SVG规范属性，shadowRoot始终为null（chrome inspector正确显示了shadowRoot树）

示例

下面是在ie中正常工作的示例代码，它似乎在其他浏览器的旧版本中正常工作：

让useNode=document.getElementById（“uc1”）；
log（useNode.instanceRoot）//未定义
log（useNode.shadowRoot）//无效的
console.log（useNode.correspondingUseElement）//未定义

---

correspondingUseElement

我认为现在在大多数浏览器中都无法可靠地做到这一点

由于浏览器中缺乏支持，这些属性最初将从SVG2中删除。然而，其中至少有一些可能是因为决定让

元素像在HTML中一样使用阴影DOM。

根据这种操作，在旧的浏览器版本（至少对于ie、opera和chrome）中使用instanceRoot属性是可能的。我不相信现在这是不可能的，也不存在向后兼容或基于shadowdom.Chrome的其他新方法。由于Opera现在使用相同的引擎（自2013年起），它也失去了它。据我所知，没有解决办法。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
    <defs>
        <circle id="c1" cx="50" cy="50" r="30" fill="green"/>
    </defs>
    <use id="uc1" x="0" y="0" xlink:href="#c1"></use>
    <use id="uc2" x="100" y="100" xlink:href="#c1"></use>
</svg>

let useNode = document.getElementById("uc1");
console.log(useNode.instanceRoot); //undefined
console.log(useNode.shadowRoot); //null
console.log(useNode.correspondingUseElement); //undefined