use

Der "use" Tag kann recht nützlich sein. Mit ihm können Klone eines Objektes erzeugt werden. Es gibt aber auch Einschränkungen.
Wie im unteren Beispiel zu sehen, versuche ich die stroke und fill Eigenschaft zu ändern. Beide Angaben werden ignoriert, da sie im Circle1 schon gesetzt wurden.

<svg height="200px" width="100%">
   <circle cx="40" cy="40" r="30" style="fill: lightblue; stroke: blue; stroke-width: 5px;"></circle>
   <use href="#Circle1" style="stroke: red;" x="80"></use>
   <use href="#Circle1" style="fill: red;" y="80"></use>
</svg>

In diesem Beispiel wurden dem Circle2 noch keine syling Atribute mit auf den Weg gegeben. Somit sind diese noch frei zu vergeben.
Wie am rect Element zu sehen wird das geklonte Element relativ zum Original verschoben. Das x des Originals hat 260, das x der Kopie wird um 20 nach Rechts verschoben.
Width und height haben keinen effekt und werden ignoriert.

<svg height="200px" width="100%">
   <circle cx="40" cy="40" id="Circle2" r="30"></circle>
   <use href="#Circle2" style="stroke: red; stroke-width: 5px;" x="80"></use>
   <use href="#Circle2" style="fill: red;" y="80"></use>
 
   <rect height="60" id="Rect1" style="fill: red; opacity:.3;" width="60" x="260" y="10"></rect>
   <use height="30" href="#Rect1" x="20"></use>
</svg>