この記事は翻訳が完了していません。 この記事の翻訳にご協力ください
SVG 言語における要素に直接対応する SVG DOM インタフェースのすべては、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="https://developer.mozilla.org/ja/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/ja/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/ja/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/ja/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;}
属性
Also inherits properties from: Element, HTMLOrForeignElement
SVGElement.dataset読取専用- 要素に付与されたカスタム・データ属性に対応する名前つきデータ属性の、キーと値の対のリストを与える、
DOMStringMapオブジェクトです。data-*の形の属性を使って、これらの対を SVG で定義することもでき、ここで*は、その対のキーの名前です。これは、HTML のHTMLElement.dataset属性および HTML のdata-*グローバル属性とちょうど同様に、うまく機能します。 SVGElement.className読取専用- An
SVGAnimatedStringthat reflects the value of theclassattribute on the given element, or the empty string ifclassis not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to useElement.classListinstead. SVGElement.ownerSVGElement読取専用- 直近の先祖の
<svg>要素を参照するSVGSVGElementです。もし、与えられた要素が最も外側の<svg>要素であれば、nullです。 SVGElement.viewportElement読取専用- 現在のビューポートを確立した
SVGElementです。多くの場合は、直近の先祖の<svg>要素です。もし、与えられた要素が最も外側の<svg>要素であれば、nullです。
メソッド
SVGElement インタフェースは、追加のメソッドを何も提供しませんが、親から、すなわち Element, HTMLOrForeignElement から、メソッドを継承しています。
イベント
Events
Listen to these events using 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.
Also available via theonabortproperty. error- Fired when an SVG element does not load properly or when an error occurs during script execution.
Also available via theonerrorproperty. load- Fires on an
SVGElementwhen it is loaded in the browser.
Also available via theonloadproperty. resize- Fired when an SVG document is being resized.
Also available via theonresizeproperty. scroll- Fired when an SVG document view is being shifted along the X and/or Y axes.
Also available via theonscrollproperty. unload- Fired when the DOM implementation removes an SVG document from a window or frame.
Also available via theonunloadproperty.
仕様
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 SVGElement の定義 |
勧告候補 | Adds the dataset property. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) SVGElement の定義 |
勧告 | Initial definition |
ブラウザ互換性
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
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
SVGElement | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 あり | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
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 未対応 なし | 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 完全対応 あり | Edge 完全対応 ≤79 | Firefox 完全対応 51 | IE 未対応 なし | Opera 完全対応 あり | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 51 | Opera Android 完全対応 あり | Safari iOS ? | Samsung Internet Android 完全対応 あり |
load event | Chrome 完全対応 あり | Edge 完全対応 ≤79 | Firefox
完全対応
あり
| IE ? | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
あり
| Opera Android ? | Safari iOS ? | Samsung Internet Android 完全対応 あり |
offsetHeight | Chrome 未対応 ? — 50 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 37 | Safari 未対応 なし | WebView Android 未対応 ? — 50 | Chrome Android 未対応 ? — 50 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 37 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 ? — 5.0 |
offsetLeft | Chrome 未対応 ? — 50 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 37 | Safari 未対応 なし | WebView Android 未対応 ? — 50 | Chrome Android 未対応 ? — 50 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 37 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 ? — 5.0 |
offsetParent | Chrome 未対応 ? — 50 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 37 | Safari 未対応 なし | WebView Android 未対応 ? — 50 | Chrome Android 未対応 ? — 50 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 37 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 ? — 5.0 |
offsetTop | Chrome 未対応 ? — 50 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 37 | Safari 未対応 なし | WebView Android 未対応 ? — 50 | Chrome Android 未対応 ? — 50 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 37 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 ? — 5.0 |
offsetWidth | Chrome 未対応 ? — 50 | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 ? — 37 | Safari 未対応 なし | WebView Android 未対応 ? — 50 | Chrome Android 未対応 ? — 50 | Firefox Android 未対応 なし | Opera Android 未対応 ? — 37 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 ? — 5.0 |
resize event | Chrome 完全対応 あり | Edge 完全対応 ≤79 | Firefox 完全対応 あり | IE ? | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 あり | Opera Android ? | Safari iOS ? | Samsung Internet Android 完全対応 あり |
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 ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。
参照
- HTML
data-*attribute - SVG
data-*attribute - Using custom data attributes in HTML