SVGTransform: setMatrix() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
setMatrix() は SVGTransform インターフェイスのメソッドで、座標変換の種類を SVG_TRANSFORM_MATRIX に設定し、引数 matrix で新しい座標変換を定義します。
なお、引数 matrix の値がコピーされることに注意してください。つまり、このメソッドを呼び出した後に matrix オブジェクトに変更を加えても、変換には影響しません。
構文
js
setMatrix(matrix)
引数
返値
なし (undefined)。
例外
NoModificationAllowedErrorDOMException-
属性または
SVGTransformオブジェクトが読み取り専用であった場合に発生します。
例
座標変換行列を設定
js
// SVG 要素を取得し、座標変換オブジェクトを作成
const svgElement = document.querySelector("svg");
const transform = svgElement.createSVGTransform();
// DOMMatrix を指定された値で作成
const matrix = new DOMMatrix();
matrix.a = 1; // Scale X
matrix.d = 1; // Scale Y
matrix.e = 50; // Translate X
matrix.f = 50; // Translate Y
// 座標変換を新しい行列に設定
transform.setMatrix(matrix);
console.dir(transform.matrix); // 出力: SVGMatrix { a: 1, b: 0, c: 0, d: 1, e: 50, f: 50 }
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGTransform__setMatrix |