SVGGraphicsElement: getScreenCTM() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die getScreenCTM()-Methode der SVGGraphicsElement-Schnittstelle repräsentiert die Matrix, die das Koordinatensystem des aktuellen Elements in das Koordinatensystem des SVG-Viewports für das SVG-Dokumentfragment transformiert.

Syntax

js
getScreenCTM()

Parameter

Keine.

Rückgabewert

Ein DOMMatrix-Objekt.

Beispiele

Erhalten der Bildschirm-Transformationsmatrix

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>
js
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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGGraphicsElement__getScreenCTM

Browser-Kompatibilität

BCD tables only load in the browser