SVGGraphicsElement: getCTM() 方法

Baseline 已廣泛支援

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

getCTM() 方法是 SVGGraphicsElement 介面的一個方法，它返回一個矩陣，該矩陣將當前元素的座標系統轉換到其 SVG 視口（SVG viewport）的座標系統。

語法

getCTM()

引數

無。

返回值

一個 DOMMatrix 物件。

示例

獲取變換矩陣

html

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <!-- Circle transformed using translation -->
  <circle
    id="circle"
    cx="50"
    cy="50"
    r="30"
    fill="blue"
    transform="translate(100, 150)" />
</svg>

const circle = document.getElementById("circle");

// Get the current transformation matrix
const ctm = circle.getCTM();

console.log("Matrix values:");
console.log(
  `a: ${ctm.a}, b: ${ctm.b}, c: ${ctm.c}, d: ${ctm.d}, e: ${ctm.e}, f: ${ctm.f}`,
);
// Output: Matrix values: a: 1, b: 0, c: 0, d: 1, e: 100, f: 150

規範

規範
Scalable Vector Graphics (SVG) 2 # __svg__SVGGraphicsElement__getCTM

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年2月2日，由 MDN 貢獻者修改。

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