blob: 9d54cf9def8ce1eb3cac990b6548e3dcf082cb76 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: SVGElement
slug: Web/API/SVGElement
tags:
- API
- Interface
- Reference
- SVG
- SVG DOM
- SVGElement
translation_of: Web/API/SVGElement
---
<div>{{APIRef("SVG")}}</div>
<p>SVG 言語における要素に直接対応する SVG DOM インタフェースのすべては、<code>SVGElement</code> インタフェースから派生しています。</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="属性">属性</h2>
<p><em>Also inherits properties from: {{DOMxRef("Element")}}, {{DOMxRef("HTMLOrForeignElement")}}</em></p>
<dl>
<dt>{{domxref("SVGElement.dataset")}}{{ ReadOnlyInline }}</dt>
<dd>要素に付与された<a href="/ja/docs/Web/Guide/HTML/Using_data_attributes">カスタム・データ属性</a>に対応する名前つきデータ属性の、キーと値の対のリストを与える、{{domxref("DOMStringMap")}} オブジェクトです。{{SVGAttr("data-*")}} の形の属性を使って、これらの対を SVG で定義することもでき、ここで <code>*</code> は、その対のキーの名前です。これは、HTML の {{domxref("HTMLElement.dataset")}} 属性および HTML の {{htmlattrxref("data-*")}} グローバル属性とちょうど同様に、うまく機能します。</dd>
<dt>{{DOMxRef("SVGElement.className")}} {{Deprecated_Inline}}{{ReadOnlyInline}}</dt>
<dd>An {{DOMxRef("SVGAnimatedString")}} that reflects the value of the {{SVGAttr("class")}} attribute on the given element, or the empty string if <code>class</code> is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use {{DOMxRef("Element.classList")}} instead.</dd>
<dt>{{domxref("SVGElement.ownerSVGElement")}}{{ ReadOnlyInline }}</dt>
<dd>直近の先祖の {{SVGElement("svg")}} 要素を参照する {{domxref("SVGSVGElement")}} です。もし、与えられた要素が最も外側の <code><svg></code> 要素であれば、<code>null</code> です。</dd>
<dt>{{domxref("SVGElement.viewportElement")}}{{ ReadOnlyInline }}</dt>
<dd>現在のビューポートを確立した {{domxref("SVGElement")}} です。多くの場合は、直近の先祖の {{SVGElement("svg")}} 要素です。もし、与えられた要素が最も外側の <code><svg></code> 要素であれば、<code>null</code> です。</dd>
</dl>
<h2 id="メソッド">メソッド</h2>
<p><em><code>SVGElement</code> </em>インタフェースは、追加のメソッドを何も提供しませんが、親から、すなわち <em> {{domxref("Element")}}, </em><em>{{DOMxRef("HTMLOrForeignElement")}}</em> <em> から、</em>メソッドを継承しています。</p>
<h2 id="イベント">イベント</h2>
<h2 id="Events">Events</h2>
<p>Listen to these events using <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the equivalent <code>on...</code> handler property defined on {{DOMxRef("GlobalEventHandlers")}} or {{DOMxRef("WindowEventHandlers")}}.</p>
<dl>
<dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SVGElement/abort_event">abort</a></code></dt>
<dd>Fired when page loading is stopped before an SVG element has been allowed to load completely.<br>
Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onabort">onabort</a></code> property.</dd>
<dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SVGElement/error_event">error</a></code></dt>
<dd>Fired when an SVG element does not load properly or when an error occurs during script execution.<br>
Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code> property.</dd>
<dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SVGElement/load_event">load</a></code></dt>
<dd>Fires on an <code>SVGElement</code> when it is loaded in the browser.<br>
Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> property.</dd>
<dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SVGElement/resize_event">resize</a></code></dt>
<dd>Fired when an SVG document is being resized.<br>
Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd>
<dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SVGElement/scroll_event">scroll</a></code></dt>
<dd>Fired when an SVG document view is being shifted along the X and/or Y axes.<br>
Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code> property.</dd>
<dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SVGElement/unload_event">unload</a></code></dt>
<dd>Fired when the DOM implementation removes an SVG document from a window or frame.<br>
Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onunload">onunload</a></code> property.</dd>
</dl>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName("SVG2", "types.html#InterfaceSVGElement", "SVGElement")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Adds the {{domxref("SVGElement.dataset", "dataset")}} property.</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "types.html#InterfaceSVGElement", "SVGElement")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
<p>{{Compat("api.SVGElement")}}</p>
<h2 id="参照">参照</h2>
<ul>
<li>HTML {{htmlattrxref("data-*")}} attribute</li>
<li>SVG {{SVGAttr("data-*")}} attribute</li>
<li><a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">Using custom data attributes in HTML</a></li>
</ul>
|
