<use>
The <use>
element takes nodes from within the SVG document, and duplicates them somewhere else.
The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the use
element is, much like cloned template elements.
Example
The following example shows how to use the use
element 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 on myCircle
.
html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
<use href="#myCircle" x="10" fill="blue" />
<use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>
Attributes
href
-
The URL to an element/fragment that needs to be duplicated.
Value type:<URL>
; Default value: none; Animatable: yes xlink:href
Deprecated-
An
<IRI>
reference to an element/fragment that needs to be duplicated. If bothhref
andxlink:href
are present, the value given byhref
is 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
Note: width
, and height
have no effect on use
elements, unless the element referenced has a viewBox - i.e. they only have an effect when use
refers to a svg
or symbol
element.
Note: Starting with SVG2, x
, y
, width
, and height
are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
Global attributes
- Core Attributes
- Styling Attributes
class
,style
- Conditional Processing Attributes
-
Most notably:
requiredExtensions
,systemLanguage
- Event Attributes
- Presentation Attributes
-
Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- ARIA Attributes
-
aria-activedescendant
,aria-atomic
,aria-autocomplete
,aria-busy
,aria-checked
,aria-colcount
,aria-colindex
,aria-colspan
,aria-controls
,aria-current
,aria-describedby
,aria-details
,aria-disabled
,aria-dropeffect
,aria-errormessage
,aria-expanded
,aria-flowto
,aria-grabbed
,aria-haspopup
,aria-hidden
,aria-invalid
,aria-keyshortcuts
,aria-label
,aria-labelledby
,aria-level
,aria-live
,aria-modal
,aria-multiline
,aria-multiselectable
,aria-orientation
,aria-owns
,aria-placeholder
,aria-posinset
,aria-pressed
,aria-readonly
,aria-relevant
,aria-required
,aria-roledescription
,aria-rowcount
,aria-rowindex
,aria-rowspan
,aria-selected
,aria-setsize
,aria-sort
,aria-valuemax
,aria-valuemin
,aria-valuenow
,aria-valuetext
,role
- XLink Attributes
xlink:href
,xlink:title
Usage notes
Most attributes on use
are ignored if the corresponding attribute is already defined on the element referenced by use
. (This differs from how CSS style attributes override those set 'earlier' in the cascade).
Only the attributes x
, y
, width
, height
and href
on the use
element will or may have some effect, described later, if the referenced element has already defined the corresponding attribute. However, any other attributes not set on the referenced element will be applied to the use
element.
Since the cloned nodes are not exposed, care must be taken when using CSS to style a use
element and its cloned descendants. CSS properties are not guaranteed to be inherited by the cloned DOM unless you explicitly request them using CSS inheritance.
For security reasons, browsers may apply the same-origin policy on use
elements and may refuse to load a cross-origin URL in the href
attribute. There is currently no defined way to set a cross-origin policy for use
elements.
Warning: Since SVG 2, the xlink:href
attribute is deprecated in favor of href
. See xlink:href
page for more information.
Categories | Graphics element, Graphics referencing element, Structural element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # UseElement |
Browser compatibility
BCD tables only load in the browser