SVGGraphicsElement: transform-Eigenschaft

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 transform-Schreibgeschützte Eigenschaft der SVGGraphicsElement-Schnittstelle spiegelt den berechneten Wert der Transformations-Eigenschaft und das dazugehörige transform-Attribut des gegebenen Elements wider.

Wert

Ein SVGAnimatedTransformList-Objekt.

Beispiele

Zugriff auf die transform-Eigenschaft

html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <!-- Rectangle with a transformation applied -->
  <rect
    id="rect1"
    x="50"
    y="50"
    width="100"
    height="100"
    fill="blue"
    transform="translate(20, 30) rotate(45)" />
</svg>
js
// Access the SVG element
const rect = document.getElementById("rect1");

// Get the transform list
const transformList = rect.transform.baseVal;

// Iterate through and log each transformation
for (let i = 0; i < transformList.numberOfItems; i++) {
  const transform = transformList.getItem(i);
  console.log(`Type: ${transform.type}, Matrix: ${transform.matrix}`);
}
// Example output:
// Type: 2 (SVG_TRANSFORM_TRANSLATE), Matrix: SVGMatrix { ... }
// Type: 4 (SVG_TRANSFORM_ROTATE), Matrix: SVGMatrix { ... }

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGGraphicsElement__transform

Browser-Kompatibilität

BCD tables only load in the browser