Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
SVGGraphicsElement: transform-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGGraphicsElement__transform |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.