SVGTransform
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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 |