1

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

索引.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 元素？

4

2 回答 2

1

首先，使用元素不会创建实际的克隆，它们会创建概念上的克隆（就好像元素是在视觉上克隆的一样）。如果您需要真正的克隆，那么您应该使用例如elm.cloneNode(true).

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

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

于 2012-12-31T10:44:19.280 回答
0

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

于 2012-12-28T18:09:59.007 回答