SVGTransformList

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.

SVG-Transformationslisten-Schnittstelle

Das SVGTransformList definiert eine Liste von SVGTransform-Objekten.

Ein SVGTransformList-Objekt kann als schreibgeschützt bezeichnet werden, was bedeutet, dass Versuche, das Objekt zu modifizieren, zu einer Ausnahme führen.

Ein SVGTransformList ist indizierbar und kann wie ein Array angesprochen werden.

Schnittstellenübersicht

Implementiert auch	None
Methoden	`void clear()` [`SVGTransform`](/de/docs/Web/API/SVGTransform) initialize(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem) [`SVGTransform`](/de/docs/Web/API/SVGTransform) `getItem(in unsigned long index)` [`SVGTransform`](/de/docs/Web/API/SVGTransform) insertItemBefore(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem, in unsigned long index) [`SVGTransform`](/de/docs/Web/API/SVGTransform) replaceItem(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem, in unsigned long index) [`SVGTransform`](/de/docs/Web/API/SVGTransform) `removeItem(in unsigned long index)` [`SVGTransform`](/de/docs/Web/API/SVGTransform) appendItem(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem) [`SVGTransform`](/de/docs/Web/API/SVGTransform) createSVGTransformFromMatrix(in [`DOMMatrix`](/de/docs/Web/API/DOMMatrix)) [`SVGTransform`](/de/docs/Web/API/SVGTransform) `consolidate()`
Eigenschaften	readonly unsigned long `numberOfItems` readonly unsigned long `length` Nicht standardisiert
Normatives Dokument	SVG 1.1 (2nd Edition)

Instanzeigenschaften

Name	Typ	Beschreibung
`numberOfItems`	unsigned long	Die Anzahl der Elemente in der Liste.
`length` Nicht standardisiert	unsigned long	Die Anzahl der Elemente in der Liste.

Instanzmethoden

Name & Argumente	Rückgabe	Beschreibung
`clear()`	`void`	Löscht alle vorhandenen aktuellen Elemente aus der Liste, sodass eine leere Liste entsteht. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
initialize(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem)	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Löscht alle vorhandenen aktuellen Elemente aus der Liste und initialisiert die Liste neu, um das durch den Parameter angegebene Einzelelement zu halten. Falls 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. Der Rückgabewert ist das Element, das in die Liste eingefügt wird. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
`getItem(in unsigned long index)`	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Gibt das angegebene Element aus der Liste zurück. Das zurückgegebene Element ist das Element selbst und keine Kopie. Alle an dem Element vorgenommenen Änderungen werden sofort in der Liste widergespiegelt. Das erste Element ist die Nummer 0. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
insertItemBefore(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem, in unsigned long index)	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Fügt ein neues Element an der angegebenen Position in die Liste ein. Das erste Element ist die Nummer 0. Falls `newItem` 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. Wenn das Element bereits in dieser Liste ist, beachten Sie, dass der Index des Elements, vor dem eingefügt werden soll, vor dem Entfernen des Elements ist. Wenn der `index` gleich 0 ist, wird das neue Element am Anfang der Liste eingefügt. Wenn der Index größer oder gleich `numberOfItems` ist, wird das neue Element am Ende der Liste angehängt. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
replaceItem(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem, in unsigned long index)	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Ersetzt ein vorhandenes Element in der Liste durch ein neues Element. Wenn `newItem` 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. Wenn das Element bereits in dieser Liste ist, beachten Sie, dass der Index des Elements, das ersetzt werden soll, vor dem Entfernen des Elements ist. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist. ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `INDEX_SIZE_ERR` wird ausgelöst, wenn die Indexnummer größer oder gleich `numberOfItems` ist.
`removeItem(in unsigned long index)`	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Entfernt ein vorhandenes Element aus der Liste. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist. ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `INDEX_SIZE_ERR` wird ausgelöst, wenn die Indexnummer größer oder gleich `numberOfItems` ist.
appendItem(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem)	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Fügt ein neues Element am Ende der Liste ein. Wenn `newItem` 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. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.
createSVGTransformFromMatrix(in [`DOMMatrix`](/de/docs/Web/API/DOMMatrix))	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Erstellt ein `SVGTransform`-Objekt, das initialisiert ist, um eine Transformation vom Typ `SVG_TRANSFORM_MATRIX` durchzuführen, und dessen Werte die angegebene Matrix sind. Die Werte aus der Parameter-Matrix werden kopiert, die Matrix-Parameter werden nicht als `SVGTransform::matrix` übernommen.
`consolidate()`	[`SVGTransform`](/de/docs/Web/API/SVGTransform)	Konsolidiert die Liste der einzelnen `SVGTransform`-Objekte durch Multiplikation der äquivalenten Transformationsmatrizen, sodass eine Liste entsteht, die aus einem einzelnen `SVGTransform`-Objekt vom Typ `SVG_TRANSFORM_MATRIX` besteht. Der Konsolidierungsvorgang erstellt ein neues `SVGTransform`-Objekt als das erste und einzige Element in der Liste. Das zurückgegebene Element ist das Element selbst und keine Kopie. Alle an dem Element vorgenommenen Änderungen werden sofort in der Liste widergespiegelt. Ausnahmen: ein [`DOMException`](/de/docs/Web/API/DOMException) mit dem Code `NO_MODIFICATION_ALLOWED_ERR` wird ausgelöst, wenn die Liste einem schreibgeschützten Attribut entspricht oder wenn das Objekt selbst schreibgeschützt ist.

In diesem Beispiel erstellen wir eine Funktion, die drei verschiedene Transformationen auf das SVG-Element anwendet, auf das geklickt wurde. Dazu erstellen wir ein separates SVGTransform-Objekt für jede Transformation — wie translate, rotate und scale. Wir wenden mehrere Transformationen an, indem wir das Transformationsobjekt an die SVGTransformList anhängen, die mit einem SVG-Element verknüpft ist.

html

<svg
  id="my-svg"
  viewBox="0 0 300 280"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <desc>
    Example showing how to transform svg elements that using SVGTransform
    objects
  </desc>
  <script type="application/ecmascript">
    <![CDATA[
      function transformMe(evt) {
        // svg root element to access the createSVGTransform() function
        const svgRoot = evt.target.parentNode;
        // SVGTransformList of the element that has been clicked on
        const tfmList = evt.target.transform.baseVal;

        // Create a separate transform object for each transform
        const translate = svgRoot.createSVGTransform();
        translate.setTranslate(50,5);
        const rotate = svgRoot.createSVGTransform();
        rotate.setRotate(10,0,0);
        const scale = svgRoot.createSVGTransform();
        scale.setScale(0.8,0.8);

        // apply the transformations by appending the SVGTransform objects to the SVGTransformList associated with the element
        tfmList.appendItem(translate);
        tfmList.appendItem(rotate);
        tfmList.appendItem(scale);
      }
    ]]>
  </script>

  <polygon
    fill="orange"
    stroke="black"
    stroke-width="5"
    points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225"
    onclick="transformMe(evt)" />
  <rect
    x="200"
    y="100"
    width="100"
    height="100"
    fill="yellow"
    stroke="black"
    stroke-width="5"
    onclick="transformMe(evt)" />
  <text x="40" y="250" font-family="Verdana" font-size="16" fill="green">
    Click on a shape to transform it
  </text>
</svg>

Live-Vorschau:

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGTransformList

Browser-Kompatibilität

BCD tables only load in the browser