W3cubDocs

/Web APIs

SVGGraphicsElement: getCTM() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The getCTM() method of the SVGGraphicsElement interface represents the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.

Syntax

getCTM()

Parameters

None.

Return value

A DOMMatrix object.

Examples

>

Getting the Transformation Matrix

<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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
getCTM 1 12 1.5 ≤12.1 3 18 4 ≤12.1 1 1.0 3 1

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getCTM