SVGTransformList: length property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
The length read-only property of the SVGTransformList interface represents the number of items in the list.
Value
An integer; the number of SVGTransform objects in the list as an unsigned long.
Examples
Accessing the length Property
html
<svg width="200" height="200" id="mySvg">
<rect width="100" height="100" fill="blue" />
</svg>
js
const svgElement = document.querySelector("svg");
const rectElement = svgElement.querySelector("rect");
// Access the transform list of the <rect> element
const transformList = rectElement.transform.baseVal;
// Apply a translate transformation to the <rect> element
const translateTransform = svgElement.createSVGTransform();
translateTransform.setTranslate(50, 50);
transformList.appendItem(translateTransform);
console.log(`Number of transformations: ${transformList.length}`); // Output: 1
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGNameList__length |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
length
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
SVGTransformSVGTransformList.numberOfItems(alias property)