SVGSVGElement: createSVGTransformFromMatrix() 方法

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

SVGSVGElement 介面的 createSVGTransformFromMatrix() 方法建立一個獨立於任何文件樹的 SVGTransform 物件，該物件基於給定的 DOMMatrix 物件。

語法

createSVGTransformFromMatrix(matrix)

引數

matrix: 一個表示變換初始矩陣的 DOMMatrix 物件。

返回值

一個 SVGTransform 物件，它被初始化為給定的矩陣變換。如果 matrix 是 2D 的，則為 matrix() 變換；否則為 matrix3d() 變換。

示例

從矩陣建立變換

html

<svg id="exampleSVG" width="200" height="200">
  <rect id="exampleRect" x="50" y="50" width="100" height="50" fill="blue" />
</svg>

const svgElement = document.getElementById("exampleSVG");
const rectElement = document.getElementById("exampleRect");

// Create a new matrix
const matrix = svgElement.createSVGMatrix();
matrix.a = 1; // Scale x
matrix.d = 1; // Scale y
matrix.e = 50; // Translate x
matrix.f = 50; // Translate y

// Create a new SVGTransform from the matrix
const transform = svgElement.createSVGTransformFromMatrix(matrix);

// Apply the transform to the rectangle
rectElement.transform.baseVal.appendItem(transform);

規範

規範
Scalable Vector Graphics (SVG) 2 # __svg__SVGSVGElement__createSVGTransformFromMatrix

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改時間為 2025 年 2 月 2 日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題