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 des SVGTransformList-Interfaces löscht alle aktuellen Elemente von der Liste und initialisiert die Liste neu, um das einzelne Element zu halten, das durch den Parameter angegeben ist.

Wenn das eingefügte Element bereits in einer Liste ist, wird es aus seiner vorherigen Liste entfernt, bevor es in diese Liste eingefügt wird. Das eingefügte Element ist das Element selbst und keine Kopie.

Syntax

SVGTransformList.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

Die Transformationsliste mit einer neuen Transformation neu initialisieren

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