DOMMatrix: scaleSelf() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
メモ: この機能はウェブワーカー内で利用可能です。
scaleSelf() は DOMMatrix インターフェイスのメソッドで、指定された変倍率を適用して行列を変更する座標変換メソッドです。この変倍率は、デフォルトの原点 (0, 0) を基準に、指定された原点を中心として作用し、変倍された行列を返します。
行列を変更せず変倍するには、DOMMatrixReadOnly.scale() を参照してください。これは元の行列を変更せず、変倍後の新しい行列を生成します。
構文
scaleSelf()
scaleSelf(scaleX)
scaleSelf(scaleX, scaleY)
scaleSelf(scaleX, scaleY, scaleZ)
scaleSelf(scaleX, scaleY, scaleZ, originX)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)
引数
scaleX省略可-
X 軸の拡大縮小する値の倍率。指定されていない場合、デフォルト値は
1となります。 scaleY省略可-
Y 軸の拡大縮小する値の倍率。省略した場合は
scaleXの値が既定値となります。 scaleZ省略可-
z 軸の拡大縮小する値の倍率。この値が 1 以外の場合、結果の行列は三次元になります。
originX省略可-
座標変換の原点の x 座標。原点が与えられなかった場合、既定値は 0 です。
originY省略可-
座標変換の原点の y 座標。原点が与えられなかった場合、既定値は 0 です。
originZ省略可-
座標変換の原点の z 座標。原点が与えられなかった場合、既定値は 0 です。この値が 0 以外の場合、結果の行列は三次元になります。
返値
自分自身を返します。 DOMMatrix です。
Z 軸を中心に変倍した場合、行列は 4✕4 の三次元行列になります。
例
この SVG には、半透明の正方形が 2 つ含まれています。1 つは赤、もう 1 つは青で、それぞれ文書の原点に位置指定されています。
<svg viewBox="0 0 50 50" height="200">
<rect width="25" height="25" fill="#ff000099" />
<rect id="transformed" width="25" height="25" fill="#0000ff99" />
</svg>
この JavaScript はまず行列を生成し、scaleSelf() メソッドを使用して幅を半分にし高さを 2 倍にする行列に変倍します。
その後、この行列が transform として青い四角形に適用され、そのサイズと位置が変更されます。赤い四角形は変更されません。
const matrix = new DOMMatrix();
matrix.scaleSelf(0.5, 2);
document
.querySelector("#transformed")
.setAttribute("transform", matrix.toString());
仕様書
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-scaleself |
ブラウザーの互換性
関連情報
DOMMatrixReadOnly.scale()DOMMatrix.scale3dSelf()- CSS の
transformプロパティ、scale()関数、matrix()関数 - CSS 座標変換モジュール
- SVG の
transform属性 CanvasRenderingContext2Dインターフェイスのtransform()メソッド