2016-12-16 4 views
0

svgタグ内のuseタグを試しています。 JSFiddleで作業している基本的な例があります。https://jsfiddle.net/cneLLLqu/使用タグ内でイベントが発生しない

赤い四角(defsuseタグの外側)をクリックすると、メッセージボックスが表示されます。緑の四角をクリックしても、クリックイベントは発生しません。なぜ私はイベントが赤い広場で始まり、緑で始まらないのか分からない。要素を調べるとすべてがうまく見えます。

私は現在、彼らは完全に独立している必要があり、あなたが<use>を使用する必要はありませんオペラ42

+0

私は、スタンドアロン/カプセル化された要素を複数回再利用できるようにすることを目標にしています。要素には、その外観を操作する内部イベントがあります。 この第1の原理のテストは、「使用されている」オブジェクト内でイベントが発生しない理由の背後にある理由を特定しようとしています。 –

答えて

1

あなたがしたいことはできません。 SVG 1.1仕様から:

「使用」要素の効果があるとして参照 要素の内容が深くとして「使用」要素を有し 別個非露光DOMツリー中にクローニングされた場合その親とすべての 'use'要素の上位レベルの祖先としての祖先 が含まれています。複製されたDOMツリー は公開されていないため、SVGドキュメントオブジェクトモデル(DOM)には 「use」要素とその属性のみが含まれています。 SVG DOMは、 'use'要素の子として参照された要素の内容を で示していません。

0

を使用しています。

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect id="rect-1" fill="#D0011B" x="0" y="0" width="50" height="50" onclick="alert('rect-1 clicked!')"></rect> 
 
    <rect id="rect-2" fill="#4990E2" x="70" y="0" width="50" height="50" onclick="alert('rect-2 clicked!')"></rect> 
 
</svg>

私はちょうどあなたが他の回答で、あなたが<use>タグませんdefs要素へonclickハンドラを追加する必要があり、その場合には作られたコメントを見ました。

<use xlink:href="#test" x="60" y="0" onclick="alert('clicked')"> 
+0

参照されているオブジェクトの領域内にイベントコードを残す方法はありますか?最終的にこれらのオブジェクトは別のファイルから参照され、コードはそこに存在します。 –

+1

実際のオブジェクトが ' 'なので、私はできないと思います。もう1つはテンプレートです。 –

関連する問題