1

<use xlink:href="path/to/file.svg">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要素にアクセスするにはどうすればよいですか？

4

2 に答える 2

1

まず、use要素は実際のクローンを作成するのではなく、概念的なクローンを作成します（要素が視覚的にクローンされたかのように）。実際のクローンが必要な場合は、たとえばを使用して実行する必要がありますelm.cloneNode(true)。

use要素によって構築された階層を検査する場合は、仕様を参照してください。開始点はですyourUseElm.instanceRoot。

とにかく、必要な要素を外部ファイルからメインファイルに移動するだけでよいようです。そうすれば、DOM内の要素に自然にアクセスできるようになります。もう1つの方法は、XMLHttpRequestを使用して外部ドキュメントをロードし、必要に応じて実際のクローンを挿入することです。

于 2012-12-31T10:44:19.280 に答える
0

<use>DOM要素がディレクティブに含まれている場合、JavaScriptを使用してDOM要素にアクセスすることはできません。

于 2012-12-28T18:09:59.007 に答える