SVG use DOM interface
The SVGUseElement interface corresponds to the <use> element.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGElement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGElement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#D4DDE4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#D4DDE4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#D4DDE4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGraphicsElement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#D4DDE4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGUseElement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGUseElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
This interface also inherits properties from its parent interface, SVGGraphicsElement and implements properties from SVGURIReference.
SVGUseElement.xRead only- An
SVGAnimatedLengthcorresponding to thexattribute of the given element. SVGUseElement.yRead only- An
SVGAnimatedLengthcorresponding to theyattribute of the given element. SVGUseElement.widthRead only- An
SVGAnimatedLengthcorresponding to thewidthattribute of the given element. SVGUseElement.heightRead only- An
SVGAnimatedLengthcorresponding to theheightattribute of the given element. SVGUseElement.instanceRootRead only- An
SVGElementcorresponding to the instance root of the given element, which is a direct child of the elements shadow root. If the element does not have a shadow tree (for example, because its URI is invalid or because it has been disabled by conditional processing), then getting this attribute returnsnull. SVGUseElement.animatedInstanceRootRead only- An
SVGElementcorresponding to the instance root of the given element, which is a direct child of the elements shadow root. If the element does not have a shadow tree (for example, because its URI is invalid or because it has been disabled by conditional processing), then getting this attribute returnsnull.
Methods
This interface doesn't implement any specific methods, but inherits methods from its parent interface, SVGGraphicsElement and implements methods from SVGURIReference.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of 'SVGUseElement' in that specification. |
Candidate Recommendation | Redefined the properties instanceRoot and animatedInstanceRoot. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGUseElement' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGUseElement | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
animatedInstanceRoot | Chrome No support No | Edge Full support 12 | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
height | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
instanceRoot | Chrome No support No | Edge Full support 12 | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android No support No | Chrome Android No support No | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
width | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
x | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
y | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown