W3cubDocs

/Web APIs

SVGTransformList: appendItem() 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 appendItem() method of the SVGTransformList interface inserts a new item at the end of the list.

The inserted item is the item itself and not a copy.

If newItem is already in a list, it is removed from its previous list before it is inserted into this list.

Syntax

appendItem(newItem)

Parameters

newItem: An SVGTransform item that is appended to the list.

Return value

An SVGTransform object; the appended 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

Appending a New Transformation

<svg width="200" height="200">
  <rect width="100" height="100" fill="red" />
</svg>

const svgElement = document.querySelector("svg");
const rectElement = svgElement.querySelector("rect");

// Access the transform list of the <rect> element
const transformList = rectElement.transform.baseVal;

// Create a new translation transformation
const svgTransform = svgElement.createSVGTransform();
svgTransform.setTranslate(50, 50);

// Append the new transformation to the list
const appendedTransform = transformList.appendItem(svgTransform);

console.dir(appendedTransform); // Output: SVGTransform { type: 2, matrix: SVGMatrix, angle: 0 }
console.log(`Total number of transformations: ${transformList.numberOfItems}`); // Output: 1

Specifications

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

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