--- 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>