通过javascript

Question

我想要什么

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

问题

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

我尝试了什么

在阅读spec后，我尝试使用SVGUseElement.instanceRoot，SVGElementInstance.correspondingUseElement甚至shadowRoot，但现代浏览器中的SVGUseElement实例错过了所有SVG规范属性（期望ie11），而shadowRoot始终为null （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

correspondingUseElement

Answer 1

我认为你现在不能在大多数浏览器中可靠地做到这一点。

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