<use>

The following example shows how to use theuseelement to draw a circle with a different fill and stroke color. In the last circle,stroke= "red"will be ignored because stroke was already set onmyCircle.

html,
body,
svg{
height:100%;
}

<svgviewBox="0 0 30 10"xmlns="http://www.w3.org/2000/svg">
<circleid="myCircle"cx="5"cy="5"r="4"stroke="blue"/>
<usehref="#myCircle"x="10"fill="blue"/>
<usehref="#myCircle"x="20"fill="white"stroke="red"/>
</svg>

href

The URL to an element/fragment that needs to be duplicated. SeeUsage notesfor details on common pitfalls.
Value type:<URL>;Default value:none;Animatable:yes

xlink:href Deprecated

An<IRI>reference to an element/fragment that needs to be duplicated. If bothhrefandxlink:hrefare present, the value given byhrefis used.
Value type:<IRI>;Default value:none;Animatable:yes

x

The x coordinate of an additional final offset transformation applied to the<use>element.
Value type:<coordinate>;Default value:0;Animatable:yes

y

The y coordinate of an additional final offset transformation applied to the<use>element.
Value type:<coordinate>;Default value:0;Animatable:yes

width

The width of the use element.
Value type:<length>;Default value:0;Animatable:yes

height

The height of the use element.
Value type:<length>;Default value:0;Animatable:yes

Most attributes onuseare ignored if the corresponding attribute is already defined on the elementreferencedbyuse.(This differs from how CSS style attributes override those set 'earlier' in the cascade). Onlythe attributesx,y,width,heightandhrefon theuseelement will or may have some effect, described later, if the referenced element has already defined the corresponding attribute. However,any other attributesnot set on the referenced elementwillbe applied to theuseelement.

Since the cloned nodes are not exposed, care must be taken when usingCSSto style auseelement and its cloned descendants. CSS properties are not guaranteed to be inherited by the cloned DOM unless you explicitly request them usingCSS inheritance.

For security reasons, browsers may apply thesame-origin policyonuseelements and may refuse to load a cross-origin URL in thehrefattribute. There is currently no defined way to set a cross-origin policy foruseelements.