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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.