SVGSVGElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The SVGSVGElement
interface provides access to the properties of <svg>
elements, as well as methods to manipulate them. This interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.
Instance properties
This interface also inherits properties from its parent, SVGGraphicsElement
.
SVGSVGElement.x
Read only-
An
SVGAnimatedLength
corresponding to thex
attribute of the given<svg>
element. SVGSVGElement.y
Read only-
An
SVGAnimatedLength
corresponding to they
attribute of the given<svg>
element. SVGSVGElement.width
Read only-
An
SVGAnimatedLength
corresponding to thewidth
attribute of the given<svg>
element. SVGSVGElement.height
Read only-
An
SVGAnimatedLength
corresponding to theheight
attribute of the given<svg>
element. SVGSVGElement.pixelUnitToMillimeterX
Deprecated-
A float representing the size of the pixel unit (as defined by CSS2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided.
SVGSVGElement.pixelUnitToMillimeterY
Deprecated-
A float representing the size of a pixel unit along the y-axis of the viewport.
SVGSVGElement.screenPixelToMillimeterX
Deprecated-
User interface (UI) events in DOM Level 2 indicate the screen positions at which the given UI event occurred. When the browser actually knows the physical size of a "screen unit", this float attribute will express that information; otherwise, user agents will provide a suitable default value (such as
.28mm
). SVGSVGElement.screenPixelToMillimeterY
Deprecated-
Corresponding size of a screen pixel along the y-axis of the viewport.
SVGSVGElement.useCurrentView
Deprecated Non-standard-
The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view, i.e., based on attributes on the
<svg>
element such asviewBox
) or on a "custom" view (i.e., a hyperlink into a particular<view>
or other element). If the initial view is the "standard" view, then this attribute isfalse
. If the initial view is a "custom" view, then this attribute istrue
. SVGSVGElement.currentView
Deprecated Non-standard-
An
SVGViewSpec
defining the initial view (i.e., before magnification and panning) of the current innermost SVG document fragment. The meaning depends on the situation: If the initial view was a "standard" view, then:- the values for
viewBox
,preserveAspectRatio
andzoomAndPan
withincurrentView
will match the values for the corresponding DOM attributes that are onSVGSVGElement
directly - the value for
transform
withincurrentView
will benull
If the initial view was a link into a
<view>
element, then:- the values for
viewBox
,preserveAspectRatio
andzoomAndPan
withincurrentView
will correspond to the corresponding attributes for the given<view>
element - the value for
transform
withincurrentView
will benull
If the initial view was a link into another element (i.e., other than a
<view>
), then:- the values for
viewBox
,preserveAspectRatio
andzoomAndPan
withincurrentView
will match the values for the corresponding DOM attributes that are onSVGSVGElement
directly for the closest ancestor<svg>
element - the values for
transform
withincurrentView
will benull
If the initial view was a link into the SVG document fragment using an SVG view specification fragment identifier (i.e.,
#svgView(…)
), then:- the values for
viewBox
,preserveAspectRatio
,zoomAndPan
,transform
withincurrentView
will correspond to the values from the SVG view specification fragment identifier
- the values for
SVGSVGElement.currentScale
-
On an outermost
<svg>
element, this float attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations. DOM attributescurrentScale
andcurrentTranslate
are equivalent to the 2×3 matrix[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]
. If "magnification" is enabled (i.e.,zoomAndPan="magnify"
), then the effect is as if an extra transformation were placed at the outermost level on the SVG document fragment (i.e., outside the outermost<svg>
element). SVGSVGElement.currentTranslate
Read only-
An
SVGPoint
representing the translation factor that takes into account user "magnification" corresponding to an outermost<svg>
element. The behavior is undefined for<svg>
elements that are not at the outermost level.
Instance methods
This interface also inherits methods from its parent, SVGGraphicsElement
.
SVGSVGElement.suspendRedraw()
Deprecated-
Takes a time-out value which indicates that redraw shall not occur until:
the corresponding
unsuspendRedraw()
call has been made, anunsuspendRedrawAll()
call has been made, or its timer has timed out.In environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. Calls to
suspendRedraw()
andunsuspendRedraw()
should, but need not be, made in balanced pairs.To suspend redraw actions as a collection of SVG DOM changes occur, precede the changes to the SVG DOM with a method call similar to:
jsconst suspendHandleID = suspendRedraw(maxWaitMilliseconds);
and follow the changes with a method call similar to:
jsunsuspendRedraw(suspendHandleID);
Note that multiple
suspendRedraw()
calls can be used at once, and that each such method call is treated independently of the othersuspendRedraw()
method calls. SVGSVGElement.unsuspendRedraw()
Deprecated-
Cancels a specified
suspendRedraw()
by providing a unique suspend handle ID that was returned by a previoussuspendRedraw()
call. SVGSVGElement.unsuspendRedrawAll()
Deprecated-
Cancels all currently active
suspendRedraw()
method calls. This method is most useful at the very end of a set of SVG DOM calls to ensure that all pendingsuspendRedraw()
method calls have been cancelled. SVGSVGElement.forceRedraw()
Deprecated-
In rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.
SVGSVGElement.pauseAnimations()
-
Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this
<svg>
element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused. SVGSVGElement.unpauseAnimations()
-
Resumes (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.
SVGSVGElement.animationsPaused()
-
Returns
true
if this SVG document fragment is in a paused state. SVGSVGElement.getCurrentTime()
-
Returns the current time in seconds relative to the start time for the current SVG document fragment. If
getCurrentTime()
is called before the document timeline has begun (for example, by script running in a<script>
element before the document'sSVGLoad
event is dispatched), then0
is returned. SVGSVGElement.setCurrentTime()
-
Adjusts the clock for this SVG document fragment, establishing a new current time. If
setCurrentTime()
is called before the document timeline has begun (for example, by script running in a<script>
element before the document'sSVGLoad
event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document timeline has begun. SVGSVGElement.getIntersectionList()
-
Returns a
NodeList
of graphics elements whose rendered content intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined inpointer-events
processing. SVGSVGElement.getEnclosureList()
-
Returns a
NodeList
of graphics elements whose rendered content is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined inpointer-events
processing. SVGSVGElement.checkIntersection()
-
Returns
true
if the rendered content of the given element intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined inpointer-events
processing. SVGSVGElement.checkEnclosure()
-
Returns
true
if the rendered content of the given element is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined inpointer-events
processing. SVGSVGElement.deselectAll()
-
Unselects any selected objects, including any selections of text strings and type-in bars.
SVGSVGElement.createSVGNumber()
-
Creates an
SVGNumber
object outside of any document trees. The object is initialized to0
. SVGSVGElement.createSVGLength()
-
Creates an
SVGLength
object outside of any document trees. The object is initialized to0
user units. SVGSVGElement.createSVGAngle()
-
Creates an
SVGAngle
object outside of any document trees. The object is initialized to a value of0
degrees (unitless). SVGSVGElement.createSVGPoint()
-
Creates an
SVGPoint
object outside of any document trees. The object is initialized to the point(0,0)
in the user coordinate system. SVGSVGElement.createSVGMatrix()
-
Creates an
SVGMatrix
object outside of any document trees. The object is initialized to the identity matrix. SVGSVGElement.createSVGRect()
-
Creates an
SVGRect
object outside of any document trees. The object is initialized such that all values are set to0
user units. SVGSVGElement.createSVGTransform()
-
Creates an
SVGTransform
object outside of any document trees. The object is initialized to an identity matrix transform (SVG_TRANSFORM_MATRIX
). SVGSVGElement.createSVGTransformFromMatrix()
-
Creates an
SVGTransform
object outside of any document trees. The object is initialized to the given matrix transform (i.e.,SVG_TRANSFORM_MATRIX
). The values from the parameter matrix are copied, the matrix parameter is not adopted asSVGTransform::matrix
. SVGSVGElement.getElementById()
-
Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose
id
is given byelementId
. If an Element is found, that Element is returned. If no such element exists, returnsnull
. Behavior is not defined if more than one element has this id.
Event handlers
The following Window
onXYZ
event handler properties are also available as aliases targeting the window
object. However, it is advised to listen to them on the window
object directly rather than on SVGSVGElement
.
Note: Using addEventListener()
on SVGSVGElement
will not work for the onXYZ
event handlers listed below. Listen to the events on the window
object instead.
SVGSVGElement.onafterprint
-
Fired after the associated document has started printing or the print preview has been closed.
SVGSVGElement.onbeforeprint
-
Fired when the associated document is about to be printed or previewed for printing.
SVGSVGElement.onbeforeunload
-
Fired when the window, the document and its resources are about to be unloaded.
SVGSVGElement.ongamepadconnected
-
Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
SVGSVGElement.ongamepaddisconnected
-
Fired when the browser detects that a gamepad has been disconnected.
SVGSVGElement.onhashchange
-
Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the
#
symbol). SVGSVGElement.onlanguagechange
-
Fired when the user's preferred language changes.
SVGSVGElement.onmessage
-
Fired when the window receives a message, for example from a call to
Window.postMessage()
from another browsing context. SVGSVGElement.onmessageerror
-
Fired when the window receives a message that can't be deserialized.
SVGSVGElement.onoffline
-
Fired when the browser has lost access to the network and the value of
Navigator.onLine
switches tofalse
. SVGSVGElement.ononline
-
Fired when the browser has gained access to the network and the value of
Navigator.onLine
switches totrue
. SVGSVGElement.onpagehide
-
Fired when the browser hides the current page in the process of presenting a different page from the session's history.
SVGSVGElement.onpageshow
-
Fired when the browser displays the window's document due to navigation.
SVGSVGElement.onpopstate
-
Fired when the active history entry changes while the user navigates the session history.
SVGSVGElement.onrejectionhandled
-
Fired whenever a JavaScript
Promise
is rejected and the rejection has been handled. SVGSVGElement.onstorage
-
Fired when a storage area (
localStorage
) has been modified in the context of another document. SVGSVGElement.onunhandledrejection
-
Fired whenever a
Promise
is rejected but the rejection was not handled. SVGSVGElement.onunload
-
Fired when the document is being unloaded.
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # InterfaceSVGSVGElement |
Browser compatibility
BCD tables only load in the browser