SVGTransform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

SVGTransform インターフェイスは、 SVGTransformList 内の構成要素の座標変換の 1 つを反映します。したがって、 SVGTransform オブジェクトは、 transform 属性内の単一の構成要素(scale(...) または matrix(...))に対応します。

SVGTransform オブジェクトは読み取り専用に指定することができ、その場合はオブジェクトを変更しようとすると例外が発生します。

インスタンスプロパティ

type: このインターフェイスで定義されている SVG_TRANSFORM_* 定数のいずれかで指定された値の型です。
angle: 浮動小数点数値としての角度。 SVG_TRANSFORM_ROTATE、SVG_TRANSFORM_SKEWX、SVG_TRANSFORM_SKEWY に対する利便性のための属性。 SVG_TRANSFORM_MATRIX、SVG_TRANSFORM_TRANSLATE、SVG_TRANSFORM_SCALE に対しては、 angle はゼロとなります。
matrix: この座標変換を表現する DOMMatrix としての行列。行列オブジェクトは「生きて」おり、 SVGTransform オブジェクトへの変更は即座に反映され、その逆も同様です。行列オブジェクトが直接変更された場合(すなわち、SVGTransform インターフェース自体のメソッドを使用せずに変更された場合)、SVGTransform の型は SVG_TRANSFORM_MATRIX に変更されます。

名前	値	説明
`SVG_TRANSFORM_UNKNOWN`	0	単位型が定義済みの単位型ではありません。この型で新しい値を定義しようとしたり、既存の値をこの型に切り替えようとしたりすることは無効です。
`SVG_TRANSFORM_MATRIX`	1	`matrix(...)` の座標変換です。
`SVG_TRANSFORM_TRANSLATE`	2	`translate(...)` の座標変換です。
`SVG_TRANSFORM_SCALE`	3	`scale(...)` の座標変換です。
`SVG_TRANSFORM_ROTATE`	4	`rotate(...)` の座標変換です。
`SVG_TRANSFORM_SKEWX`	5	`skewx(...)` の座標変換です。
`SVG_TRANSFORM_SKEWY`	6	`skewy(...)` の座標変換です。

インスタンスメソッド

setMatrix(): 座標変換の種類を SVG_TRANSFORM_MATRIX に設定し、新しい座標変換を定義する引数の行列を指定します。引数 matrix の値がコピーされることに注意してください。
setTranslate(): 座標変換の種類を SVG_TRANSFORM_TRANSLATE に設定し、引数 tx と ty で移動量を定義します。
setScale(): 座標変換の種類を SVG_TRANSFORM_SCALE に設定し、引数 sx と sy で倍率を定義します。
setRotate(): 座標変換の種類を SVG_TRANSFORM_ROTATE に設定し、引数 angle で回転角度を、引数 cx と cy でオプションの回転中心を定義します。
setSkewX(): 座標変換の種類を SVG_TRANSFORM_SKEWX に設定し、引数 angle で歪めの量を定義します。
setSkewY(): 座標変換の種類を SVG_TRANSFORM_SKEWY に設定し、引数 angle で歪めの量を定義します。

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransform

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年6月24日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content