W3cubDocs

/Web APIs

SVGTransformList: initialize() 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 initialize() method of the SVGTransformList interface clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter.

If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.

Syntax

initialize(newItem)

Parameters

newItem: An SVGTransform item that is inserted into the list.

Return value

An SVGTransform object; the item inserted into the list.

Exceptions

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

Examples

Re-initializing the Transform List with a New Transformation

<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 an initial translate transformation to the <rect> element
const translateTransform = svgElement.createSVGTransform();
translateTransform.setTranslate(50, 50);
transformList.appendItem(translateTransform);

// Number of transformations before initialization
console.log(
  `Number of transformations before initialization: ${transformList.length}`,
); // Output: 1

// Create a new scale transformation
const scaleTransform = svgElement.createSVGTransform();
scaleTransform.setScale(2, 2);

// Initialize the list with the new scale transform
transformList.initialize(scaleTransform);

// Number of transformations after initialization
console.log(
  `Number of transformations after initialization: ${transformList.length}`,
); // Output: 1

Specifications

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

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