SVGSVGElement

SVGSVGElement接口提供对<svg>元素的属性的访问,以及操作它们的方法。此接口还包含各种常用的实用方法,例如矩阵操作和控制可视渲染设备上重绘时间的功能。

属性

此接口还从其父 SVGGraphicsElement 继承属性,并且还实现 SVGZoomAndPan SVGFitToViewBox WindowEventHandlers 中的属性。

SVGSVGElement.x 只读
  SVGAnimatedLength 对应于给定 <svg> 元素的 x 属性
SVGSVGElement.y 只读
SVGAnimatedLength对应于给定<svg>元素的y属性。
SVGSVGElement.width 只读
SVGAnimatedLength对应于给定<svg>元素的width属性。
SVGSVGElement.height 只读
SVGAnimatedLength对应于给定<svg>元素的height属性。
SVGSVGElement.contentScriptType
SVGAnimatedLength对应于给定<svg>元素的contentScriptType属性。
SVGSVGElement.contentStyleType
SVGAnimatedLength对应于给定<svg>元素的contentStyleType属性。
SVGSVGElement.viewport
一个SVGRect,包含与给定<svg>元素对应的视口(隐式或显式)的位置和大小。当浏览器实际呈现内容时,位置和大小值表示呈现时的实际值。位置和大小值是父元素坐标系中的无单位值。如果不存在父元素(即<svg>元素表示文档树的根),如果此SVG文档作为另一文档的一部分嵌入(例如,通过HTML object element),然后位置和大小是父文档坐标系中的无单位值。(如果父级使用CSS或XSL布局,
SVGSVGElement.pixelUnitToMillimeterX
一个浮点数,表示沿视口x轴的像素单位(由CSS2定义)的大小,表示70dpi到120dpi范围内的某个单位,并且在支持此功能的系统上,可能实际上与特征匹配目标媒体。在不可能知道像素大小的系统上,提供合适的默认像素大小。
SVGSVGElement.pixelUnitToMillimeterY
浮点数,表示沿视口y轴的像素单位大小。
SVGSVGElement.screenPixelToMillimeterX
DOM级别2中的用户界面(UI)事件指示给定UI事件发生的屏幕位置。当浏览器实际知道“屏幕单元”的物理尺寸时,此浮动属性将表示该信息; 否则,用户代理将提供合适的默认值,例如.28mm。
SVGSVGElement.screenPixelToMillimeterY
沿着视口的y轴的屏幕像素的对应大小。
SVGSVGElement.useCurrentView
当前最内层SVG文档片段的初始视图(即放大和平移之前)可以是“标准”视图,即基于<svg>元素的属性,例如viewBox)或“自定义”视图(即指向特定<view>或其他元素的超链接)。如果初始视图是“标准”视图,则此属性为false如果初始视图是“自定义”视图,则此属性为true
SVGSVGElement.currentView
SVGViewSpec定义当前最里面的SVG文档片段的初始视图(即,放大和平移之前)。意义取决于具体情况:如果初始视图是“标准”视图,则: 如果初始视图是<view>元素的链接,那么: 如果初始视图是指向另一个元素的链接(即,除了<view>}之外的其他元素,则: 如果初始视图是使用SVG视图规范片段标识符(即#svgView(...))链接到SVG文档片段,则:
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 attributes currentScale and currentTranslate are equivalent to the 2x3 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 只读
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.

Methods

This interface also inherits methods from its parent, SVGGraphicsElement and also implements the ones from SVGZoomAndPan, SVGFitToViewBox, and WindowEventHandlers.

SVGSVGElement.suspendRedraw()

Takes a time-out value which indicates that redraw shall not occur until:

the corresponding unsuspendRedraw() call has been made, an unsuspendRedrawAll() 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() and unsuspendRedraw() 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:

suspendHandleID = suspendRedraw(maxWaitMilliseconds);

and follow the changes with a method call similar to:

unsuspendRedraw(suspendHandleID);

Note that multiple suspendRedraw calls can be used at once and that each such method call is treated independently of the other suspendRedraw method calls.

SVGSVGElement.unsuspendRedraw()
Cancels a specified suspendRedraw() by providing a unique suspend handle ID that was returned by a previous suspendRedraw() call.
SVGSVGElement.unsuspendRedrawAll()
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 pending suspendRedraw() method calls have been cancelled.
SVGSVGElement.forceRedraw()
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()
Unsuspends (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's SVGLoad event is dispatched), then 0 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's SVGLoad 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 in pointer-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 in pointer-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 in pointer-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 in pointer-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 to a value of zero.
SVGSVGElement.createSVGLength()
Creates an SVGLength object outside of any document trees. The object is initialized to a value of zero user units.
SVGSVGElement.createSVGAngle()
Creates an SVGAngle object outside of any document trees. The object is initialized to a value of zero 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 to 0 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 as SVGTransform::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 by elementId. If an Element is found, that Element is returned. If no such element exists, returns null. Behavior is not defined if more than one element has this id.

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
SVGSVGElement
Candidate Recommendation Replaced the inheritance from SVGElement by SVGGraphicsElement, removed the implemented interfaces SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGLocatable, DocumentEvent, ViewCSS, and DocumentCSS and added implemented interface WindowEventHandlers.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
SVGSVGElement
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
SVGSVGElementChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
animationsPausedChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
checkEnclosureChrome Full support YesEdge Full support 12Firefox No support NoIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
checkIntersectionChrome Full support YesEdge Full support 12Firefox No support NoIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
contentScriptTypeChrome ? Edge Full support 12Firefox No support ? — 20IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentStyleTypeChrome ? Edge Full support 12Firefox No support ? — 20IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
createSVGAngleChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGLengthChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGMatrixChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGNumberChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGPointChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGRectChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGTransformChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
createSVGTransformFromMatrixChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
currentScaleChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
currentTranslateChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
currentViewChrome No support ? — 56Edge No support NoFirefox Full support YesIE ? Opera No support ? — 43Safari ? WebView Android No support ? — 56Chrome Android No support ? — 56Firefox Android Full support YesOpera Android No support ? — 43Safari iOS ? Samsung Internet Android ?
deselectAllChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
forceRedraw
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
getCurrentTimeChrome ? Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
getElementByIdChrome Full support YesEdge Full support 12Firefox Full support 11IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
getEnclosureListChrome Full support YesEdge Full support 12Firefox No support NoIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
getIntersectionListChrome Full support YesEdge Full support 12Firefox No support NoIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
heightChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
pauseAnimationsChrome ? Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pixelUnitToMillimeterX
Deprecated
Chrome No support ? — 47Edge Full support 12Firefox No support ? — 61IE ? Opera No support ? — 33Safari ? WebView Android No support ? — 47Chrome Android No support ? — 47Firefox Android No support ? — 61Opera Android No support ? — 33Safari iOS ? Samsung Internet Android ?
pixelUnitToMillimeterY
Deprecated
Chrome No support ? — 47Edge Full support 12Firefox No support ? — 61IE ? Opera No support ? — 33Safari ? WebView Android No support ? — 47Chrome Android No support ? — 47Firefox Android No support ? — 61Opera Android No support ? — 33Safari iOS ? Samsung Internet Android ?
screenPixelToMillimeterX
Deprecated
Chrome No support ? — 47Edge Full support 12Firefox No support ? — 61IE ? Opera No support ? — 33Safari ? WebView Android No support ? — 47Chrome Android No support ? — 47Firefox Android No support ? — 61Opera Android No support ? — 33Safari iOS ? Samsung Internet Android ?
screenPixelToMillimeterY
Deprecated
Chrome No support ? — 47Edge Full support 12Firefox No support ? — 61IE ? Opera No support ? — 33Safari ? WebView Android No support ? — 47Chrome Android No support ? — 47Firefox Android No support ? — 61Opera Android No support ? — 33Safari iOS ? Samsung Internet Android ?
setCurrentTimeChrome ? Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
suspendRedraw
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
unpauseAnimationsChrome ? Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
unsuspendRedraw
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
unsuspendRedrawAll
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
useCurrentViewChrome No support ? — 56Edge No support NoFirefox Full support 15IE ? Opera No support ? — 43Safari ? WebView Android No support ? — 56Chrome Android No support ? — 56Firefox Android Full support 15Opera Android No support ? — 43Safari iOS ? Samsung Internet Android ?
viewportChrome ? Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
widthChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
xChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
yChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

也可以看看