SVGElement

In This Article

All of the SVG DOM interfaces that correspond directly to elements in the SVG language derive from the SVGElement interface.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" 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="#F4F7F8" 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></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

SVGElement.datasetRead only: A DOMStringMap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element. These can also be defined in SVG using attributes of the form data-*, where * is the key name for the pair. This works just like HTML's HTMLElement.dataset property and HTML's data-* global attribute.
SVGElement.idRead only: A DOMString representing the value of the id attribute on the given element, or the empty string if id is not present.
SVGElement.xmlbaseRead only: A DOMString corresponding to the xml:base attribute on the given element.
SVGElement.ownerSVGElementRead only: An SVGSVGElement referring to the nearest ancestor <svg> element. null if the given element is the outermost <svg> element.
SVGElement.viewportElementRead only: The SVGElement, which established the current viewport. Often, the nearest ancestor <svg> element. null if the given element is the outermost <svg> element.

Methods

The SVGElement interface doesn't provide any additional methods, but inherits methods from its parent, Element.

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of 'SVGElement' in that specification.	Candidate Recommendation	Adds the `dataset` property.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGElement' in that specification.	Recommendation	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Microsoft Edge	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)^[1]	(Yes)	(Yes)	(Yes)	9.0	(Yes)	(Yes)
`dataset` attribute	54	?	51 (51)	?	?	41	10.0

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	No support	(Yes)^[1]	(Yes)	(Yes)	?	(Yes)	(Yes)	(Yes) [1]
`dataset` attribute	No support	54	?	51.0 (51)	?	41	10.0	54

[1] The properties offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight are deprecated in Chrome 48.

Document Tags and Contributors

Tags:

Contributors to this page: Sebastianz, abbycar, Sheppy, tifosi, jpmedley, fscholz, kscarfone, Jeremie

Last updated by: Sebastianz, May 14, 2017, 9:33:13 AM