SVGGraphicsElement: getScreenCTM() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

getScreenCTM() 方法是 SVGGraphicsElement 接口的一部分，它表示将当前元素的坐标系转换到 SVG 文档片段的 SVG 视口的坐标系的矩阵。

语法

getScreenCTM()

参数

无。

返回值

一个 DOMMatrix 对象。

示例

获取屏幕变换矩阵

html

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

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

// Get the current screen transformation matrix
const screenCTM = circle.getScreenCTM();

console.log("Screen transformation matrix:");
console.log(
  `a: ${screenCTM.a}, b: ${screenCTM.b}, c: ${screenCTM.c}, d: ${screenCTM.d}, e: ${screenCTM.e}, f: ${screenCTM.f}`,
);
// Output: a: 2, b: 0, c: 0, d: 2, e: 100, f: 150

规范

规范
Scalable Vector Graphics (SVG) 2 # __svg__SVGGraphicsElement__getScreenCTM

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年2月2日⁩，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题