SVGGraphicsElement

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

The SVGGraphicsElement interface represents SVG elements whose primary purpose is to directly render graphics into a group.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/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/en-US/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/en-US/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/en-US/docs/Web/API/SVGElement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" 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><polyline points="481,25  491,20  491,30  481,25" stroke="#D4DDE4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#D4DDE4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#D4DDE4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="391" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">SVGGraphicsElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Note: This interface was introduced in SVG 2 and replaces the SVGLocatable and SVGTransformable interfaces from SVG 1.1.

Properties

This interface also inherits properties from its parent, SVGElement.

SVGGraphicsElement.transform Read only: An SVGAnimatedTransformList reflecting the computed value of the transform property and its corresponding transform attribute of the given element.

Methods

This interface also inherits methods from its parent, SVGElement.

SVGGraphicsElement.getBBox(): Returns a DOMRect representing the computed bounding box of the current element.
SVGGraphicsElement.getCTM(): Returns a DOMMatrix representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.
SVGGraphicsElement.getScreenCTM(): Returns a DOMMatrix representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of 'SVGGraphicsElement' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`SVGGraphicsElement`	Chrome Full support Yes	Edge Full support Yes	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?
`getBBox`	Chrome Full support Yes	Edge Full support 15	Firefox Full support Yes Notes Full support Yes Notes Notes The `getBBox()` method returns an empty `DOMRect` when there is no fill (bug 1019326). Notes This method doesn't work for `<textPath>` and `<tspan>` elements (bug 937268).	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes Notes Full support Yes Notes Notes The `getBBox()` method returns an empty `DOMRect` when there is no fill (bug 1019326). Notes This method doesn't work for `<textPath>` and `<tspan>` elements (bug 937268).	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?
`getCTM`	Chrome Full support Yes	Edge Full support 15	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?
`getScreenCTM`	Chrome Full support Yes	Edge Full support 15	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?
`transform`	Chrome Full support Yes	Edge Full support 15	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android ?

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
See implementation notes.: See implementation notes.

最終更新日: Mar 23, 2019, by MDN contributors