如何使用javascript访问克隆的svg元素

Question

我在主svg文件中使用了<use xlink:href="path/to/file.svg">元素，以便几次克隆可重复的svg块。

index.svg：

    <g id="menu_items" transform="translate(0,110)">
       <use xlink:href="path/to/file.svg">
       <use xlink:href="path/to/file.svg">
       <!-- 10 times -->
    </g>

和file.svg包含：

<g>
   <text x="10" y="5" dx="5" dy="15" fill="navy" font-size="15">
    <!-- here I want to add something with javascript-->                     
   </text>
<g>

我试图在里面找到元素，但没有结果：

document.getElementsByTagName("text"); // gives []

如何使用JavaScript访问由指令克隆的svg元素？

Answer 1

首先，use元素不会创建实际的克隆，它们会创建概念克隆（如果元素是以可视方式克隆的话）。如果您需要真正的克隆，那么您应该使用例如elm.cloneNode(true)。

如果要检查use元素构造的层次结构，请参阅spec。起点为yourUseElm.instanceRoot。

无论如何，您似乎只需将外部文件中所需的元素移动到主文件中 - 这样您就可以自然地访问DOM中的元素。另一种方法是使用XMLHttpRequest加载外部文档，并在需要的地方插入实际的克隆。

Answer 2

如果它们包含在<use>指令中，则无法使用JavaScript访问DOM元素。