CODEWITHSUNDEEP
javascripthtmlsvg
Justin Huskic
Justin Huskic

Reputation: 93

Events not firing within use tag

I have been experimenting with the use tag within an svg tag. It seems relatively simple and I have a basic example working in JSFiddle: https://jsfiddle.net/cneLLLqu/

Clicking on the red square (outside of the defs and use tags) yields a message box. Clicking on the green square does not fire any click event. I don't understand why events fire with the red square but not with the green. Inspecting the element everything looks fine.

I am currently using Opera 42.

Upvotes: 0

Views: 75

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31805

What you want to do is not possible. From the SVG 1.1 spec:

The effect of a ‘use’ element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the ‘use’ element as its parent and all of the ‘use’ element's ancestors as its higher-level ancestors. Because the cloned DOM tree is non-exposed, the SVG Document Object Model (DOM) only contains the ‘use’ element and its attributes. The SVG DOM does not show the referenced element's contents as children of ‘use’ element.

Upvotes: 1

David Gomez
David Gomez

Reputation: 2772

They must be completely independent and you don't have to use <use>.

<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>

I just saw the comment you made in the other answer and in that case you have to add the onclick handler to the <use> tag not the defs element.

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

Upvotes: 0

Related Questions