W3cubDocs

/Web APIs

SVGTransformList: getItem() 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 getItem() method of the SVGTransformList interface returns the specified item from the list.

The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.

The first item is indexed at 0.

Syntax

getItem(index)

Parameters

index: An integer; the index of the specified item as an unsigned long.

Return value

An SVGTransform object; the specified item from the list.

Exceptions

NoModificationAllowedError DOMException: Thrown if SVGTransformList corresponds to a read-only attribute or when the object itself is read-only.

Examples

Accessing an Item from the Transform List

<svg width="200" height="200" id="mySvg">
  <rect width="100" height="100" fill="blue" />
</svg>

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);

// Get the first item from the transform list
const firstTransform = transformList.getItem(0);

// Log the transformation type
console.log(`Transformation Type: ${firstTransform.type}`); // Output: 2 (for SVG_TRANSFORM_TRANSLATE)

Specifications

Specification
Scalable Vector Graphics (SVG) 2> # __svg__SVGNameList__getItem>

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
`getItem`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3	1