SVGTransform: matrix 屬性
SVGTransform 介面的只讀屬性 matrix 表示與轉換 type 對應的變換矩陣。
如果直接更改 matrix 物件（即不使用 SVGTransform 介面本身的方法） ，則 SVGTransform 的 type 會更改為 SVG_TRANSFORM_MATRIX。
-
對於
SVG_TRANSFORM_MATRIX，矩陣包含使用者提供的 a、b、c、d、e、f 值。 -
對於
SVG_TRANSFORM_TRANSLATE，e 和 f 代表平移量（a=1、b=0、c=0 且 d=1）。 -
對於
SVG_TRANSFORM_SCALE，a 和 d 代表縮放量（b=0、c=0、e=0 且 f=0）。 -
對於
SVG_TRANSFORM_SKEWX和SVG_TRANSFORM_SKEWY，a、b、c 和 d 代表將導致給定傾斜的矩陣（e=0 且 f=0）。 -
對於
SVG_TRANSFORM_ROTATE，a、b、c、d、e 和 f 一起代表將導致給定旋轉的矩陣。當圍繞中心點 (0, 0) 旋轉時，e 和 f 將為零。
值
一個活動的 DOMMatrix 物件。
示例
訪問和修改矩陣
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="rect" x="50" y="50" width="100" height="100" fill="red" />
</svg>
js
const rect = document.getElementById("rect");
const transformList = rect.transform.baseVal;
// Create and add a rotation transform
const rotateTransform = rect.ownerSVGElement.createSVGTransform();
rotateTransform.setRotate(30, 100, 100); // Rotate 30 degrees
transformList.appendItem(rotateTransform);
// Access the matrix
const matrix = transformList.getItem(0).matrix;
console.log(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
// Modify the matrix directly
matrix.a = 2; // Double the horizontal scaling
console.log(transformList.getItem(0).type); // Output: 1 (SVG_TRANSFORM_MATRIX)
理解變換型別
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="rect" x="50" y="50" width="100" height="100" fill="blue" />
</svg>
js
const rect = document.getElementById("rect");
const transformList = rect.transform.baseVal;
// Apply a translation transform
const translateTransform = rect.ownerSVGElement.createSVGTransform();
translateTransform.setTranslate(20, 30);
transformList.appendItem(translateTransform);
// Access the matrix
const matrix = transformList.getItem(0).matrix;
console.log(matrix.e, matrix.f); // Output: 20, 30
console.log(transformList.getItem(0).type); // Output: 2 (SVG_TRANSFORM_TRANSLATE)
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGTransform__matrix |
瀏覽器相容性
載入中…