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

Question

我想要什么

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

问题

不知何故，它无法在现代浏览器中完成（除了 ie），或者我只是错过了一些东西。

我尝试了什么

阅读spec 后，我尝试使用 SVGUseElement.instanceRoot、SVGElementInstance.correspondingUseElement 甚至 shadowRoot，但现代浏览器中的 SVGUseElement 实例（除了 ie11）缺少所有 SVG 规范属性，并且 shadowRoot 始终为空（chrome 检查器显示shadowRoot 树正确）。

示例

这是在 ie 中正确运行的示例代码，在其他浏览器旧版本中似乎是 working： https://codepen.io/anon/pen/weREWJ

<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

对应的UseElement

Answer 1

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

由于缺乏浏览器支持，这些属性最初将从 SVG 2 中删除。但是，由于决定让<use> 元素像在 HTML 中一样使用 Shadow DOM，因此其中一些至少可能是 making a comeback eventually in SVG 2。