Как изменить идентификатор клонированного элемента в SVG при использовании <use>

Question

У меня есть SVG-файл, в котором я хочу отобразить большое количество одинаковых элементов, поэтому я использую как в этом примере:

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

Как вы можете видеть, при щелчке по событию выдается предупреждение, в котором возвращается идентификатор, и тот же идентификатор возвращается для клонированного элемента, независимо от изменения идентификатора в «использовании». SVG поддерживает этот тип переопределения идентификаторов?

Если нет, то у меня будет очень большой SVG, потому что все элементы должны быть записаны x раз ...

Answer 1

Так что это правильное решение:

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