SVGTransformList: replaceItem() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die replaceItem()-Methode der SVGTransformList-Schnittstelle ersetzt ein vorhandenes Element in der Liste durch ein neues Element.
Das eingefügte Element ist das Element selbst und nicht eine Kopie.
-
Wenn
newItembereits in einer Liste ist, wird es aus seiner vorherigen Liste entfernt, bevor es in diese Liste eingefügt wird. -
Wenn das Element bereits in dieser Liste ist, beachten Sie, dass der
indexdes zu ersetzenden Elements vor der Entfernung des Elements liegt.
Syntax
replaceItem(newItem, index)
Parameter
newItem-
Ein
SVGTransform-Element, das in die Liste eingefügt wird. index-
Ein
integer; der Index, an dem das neue Element das vorhandene ersetzen soll, als unsigned long.
Rückgabewert
Ein SVGTransform-Objekt; das eingefügte Element aus der Liste.
Ausnahmen
Diese Methode kann eine DOMException eines der folgenden Typen auslösen:
NoModificationAllowedErrorDOMException-
Ausgelöst, wenn
SVGTransformListeinem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist. IndexSizeErrorDOMException-
Ausgelöst, wenn die Indexzahl größer oder gleich
numberOfItemsist.
Beispiele
Ersetzen einer Transformation in der Liste
<svg width="200" height="200" id="mySvg">
<rect width="100" height="100" fill="blue" transform="translate(50,50)" />
</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 rotation transformation
const rotateTransform = svgElement.createSVGTransform();
rotateTransform.setRotate(45, 50, 50);
transformList.replaceItem(rotateTransform, 0);
// Log the details of the new transformation
console.log(`New Transformation Type: ${transformList.getItem(0).type}`); // Output: 4 (e.g. SVG_TRANSFORM_ROTATE)
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGNameList__replaceItem |
Browser-Kompatibilität
Loading…