SVGElement | Web API

在此页

特性
方法
事件
规范
浏览器兼容性
另请参阅
相关话题

All of the SVG DOM interfaces that correspond directly to elements in the SVG language derive from the SVGElement 接口。

  <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="../API/EventTarget.html" 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="../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="../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="../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;}

特性

Also inherits properties from: DocumentAndElementEventHandlers , 元素 , ElementCSSInlineStyle , GlobalEventHandlers , HTMLOrForeignElement , SVGElementInstance

SVGElement.dataset 只读: DOMStringMap object which provides a list of key/value pairs of named data attributes which correspond to 自定义数据属性 attached to the element. These can also be defined in SVG using attributes of the form data-* ，其中 * is the key name for the pair. This works just like HTML's HTMLElement.dataset property and HTML's data-* 全局属性。
SVGElement.className 只读: SVGAnimatedString that reflects the value of the class attribute on the given element, or the empty string if class is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use Element.classList 代替。
SVGElement.ownerSVGElement 只读: SVGSVGElement referring to the nearest ancestor <svg> 元素。 null if the given element is the outermost <svg> 元素。
SVGElement.viewportElement 只读: SVGElement , which established the current viewport. Often, the nearest ancestor <svg> 元素。 null if the given element is the outermost <svg> 元素。

方法

This interface has no methods, but inherits methods from: DocumentAndElementEventHandlers , 元素 , ElementCSSInlineStyle , GlobalEventHandlers , HTMLOrForeignElement , SVGElementInstance

事件

监听这些事件使用 addEventListener() or by assigning an event listener to the equivalent on... handler property defined on GlobalEventHandlers or WindowEventHandlers .

abort: Fired when page loading is stopped before an SVG element has been allowed to load completely.
也可用凭借 onabort 特性。
error: Fired when an SVG element does not load properly or when an error occurs during script execution.
也可用凭借 onerror 特性。
load: Fires on an SVGElement when it is loaded in the browser.
也可用凭借 onload 特性。
resize: Fired when an SVG document is being resized.
也可用凭借 onresize 特性。
scroll: Fired when an SVG document view is being shifted along the X and/or Y axes.
也可用凭借 onscroll 特性。
unload: Fired when the DOM implementation removes an SVG document from a window or frame.
也可用凭借 onunload 特性。

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'SVGElement' in that specification.	候选推荐	添加 `dataset` 特性。
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGElement' in that specification.	推荐	初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`SVGElement`	Chrome Yes	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
`abort` event	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`dataset`	Chrome 55	Edge 17	Firefox 51	IE No	Opera 41	Safari 10	WebView Android 55	Chrome Android 55	Firefox Android 51	Opera Android 41	Safari iOS 10	Samsung Internet Android 6.0
`error` event	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`focus`	Chrome Yes	Edge ≤79	Firefox 51	IE ?	Opera Yes	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android 51	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes
`load` event	Chrome Yes	Edge ≤79	Firefox Yes Alternate Name Yes Alternate Name Alternate Name Uses the non-standard name: `SVGLoad`	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android Yes Alternate Name Yes Alternate Name Alternate Name Uses the non-standard name: `SVGLoad`	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes
`offsetHeight` 弃用非标	Chrome ? — 50	Edge No	Firefox No	IE No	Opera ? — 37	Safari No	WebView Android ? — 50	Chrome Android ? — 50	Firefox Android No	Opera Android ? — 37	Safari iOS No	Samsung Internet Android ? — 5.0
`offsetLeft` 弃用非标	Chrome ? — 50	Edge No	Firefox No	IE No	Opera ? — 37	Safari No	WebView Android ? — 50	Chrome Android ? — 50	Firefox Android No	Opera Android ? — 37	Safari iOS No	Samsung Internet Android ? — 5.0
`offsetParent` 弃用非标	Chrome ? — 50	Edge No	Firefox No	IE No	Opera ? — 37	Safari No	WebView Android ? — 50	Chrome Android ? — 50	Firefox Android No	Opera Android ? — 37	Safari iOS No	Samsung Internet Android ? — 5.0
`offsetTop` 弃用非标	Chrome ? — 50	Edge No	Firefox No	IE No	Opera ? — 37	Safari No	WebView Android ? — 50	Chrome Android ? — 50	Firefox Android No	Opera Android ? — 37	Safari iOS No	Samsung Internet Android ? — 5.0
`offsetWidth` 弃用非标	Chrome ? — 50	Edge No	Firefox No	IE No	Opera ? — 37	Safari No	WebView Android ? — 50	Chrome Android ? — 50	Firefox Android No	Opera Android ? — 37	Safari iOS No	Samsung Internet Android ? — 5.0
`resize` event	Chrome Yes	Edge ≤79	Firefox Yes	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes
`scroll` event	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`unload` event	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

图例

完整支持
不支持
兼容性未知 ?
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。

另请参阅

元数据

最后修改： Feb 18, 2020

在此页

特性

方法

事件

规范

浏览器兼容性

图例

另请参阅

相关话题