SVGTransformList: initialize() Methode

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 initialize()-Methode der SVGTransformList-Schnittstelle entfernt alle vorhandenen aktuellen Elemente aus der Liste und initialisiert die Liste neu, um das durch den Parameter angegebene einzelne Element zu halten.

Wenn das eingefügte Element bereits in einer Liste enthalten ist, wird es vor dem Einfügen in diese Liste aus seiner vorherigen Liste entfernt. Das eingefügte Element ist das Element selbst und keine Kopie.

Syntax

initialize(newItem)

Parameter

newItem: Ein SVGTransform-Element, das in die Liste eingefügt wird.

Rückgabewert

Ein SVGTransform-Objekt; das Element, das in die Liste eingefügt wurde.

Ausnahmen

NoModificationAllowedError DOMException: Wird ausgelöst, wenn SVGTransformList einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.

Beispiele

Neu-Initialisierung der Transformationsliste mit einer neuen Transformation

html

<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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # __svg__SVGNameList__initialize

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

SVGTransform