CODEWITHSUNDEEP
svgelement
Techno Centrist
Techno Centrist

Reputation: 31

How to change ID of cloned element in SVG when using <use>

I am having SVG file where I want to display large amount of same elements so I am using like in this example:

<svg width="250mm" height="297mm" viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg">
<circle id="1770" cx="63" cy="9.375" r="2" stroke="#9ACD32" opacity="0.4" onclick="alert('click!' + id)"/>
<use href="#1770" id="1771" x="10" y="0" />
</svg>

As you can see, on click event fires alert where id is returned, and the same id is returned for cloned element, regardless of id change in "use". Does SVG supports this kind of id overriding?

If not, then I will have very large SVG because all elements has to be written x times...

Upvotes: 1

Views: 208

Answers (1)

Techno Centrist
Techno Centrist

Reputation: 31

So this is the right solution:

<svg width="250mm" height="297mm" viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg">
<defs>
	<circle id="circ" cx="63" cy="9.375" r="2" stroke="#9ACD32" opacity="0.4" />
</defs>
<use href="#circ" id="1771" x="20" y="0" onclick="alert('click!' + id)"/>
<use href="#circ" id="1772" x="10" y="0" onclick="alert('click!' + id)"/>
</svg>

Upvotes: 2

Related Questions