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

Die SVGTransformList definiert eine Liste von SVGTransform-Objekten.

Ein SVGTransformList-Objekt kann als schreibgeschützt festgelegt werden, was bedeutet, dass Versuche, das Objekt zu ändern, eine Ausnahme auslösen.

Eine SVGTransformList ist indexierbar und kann wie ein Array zugegriffen werden.

Schnittstellenübersicht

Implementiert auch Keine
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
Normatives Dokument SVG 1.1 (2nd Edition)

Instanz-Eigenschaften

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

Instanz-Methoden

Name & Argumente Rückgabewert Beschreibung
[`clear`](/de/docs/Web/API/SVGTransformList/clear)() void

Entfernt alle bestehenden Elemente aus der Liste, so dass 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`](/de/docs/Web/API/SVGTransformList/initialize)(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem) [`SVGTransform`](/de/docs/Web/API/SVGTransform)

Entfernt alle bestehenden Elemente aus der Liste und initialisiert die Liste mit dem durch den Parameter angegebenen Einzelobjekt. 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. Der Rückgabewert ist das Element, das in die Liste eingefügt wurde.

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`](/de/docs/Web/API/SVGTransformList/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 Änderungen am Element werden sofort in der Liste widergespiegelt. Das erste Element ist 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`](/de/docs/Web/API/SVGTransformList/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 Nummer 0. 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 einzufügenden Elements vor der Entfernung des Elements zugewiesen wird. Wenn der index gleich 0 ist, wird das neue Element an den 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`](/de/docs/Web/API/SVGTransformList/replaceItem)(in [`SVGTransform`](/de/docs/Web/API/SVGTransform) newItem, in unsigned long index) [`SVGTransform`](/de/docs/Web/API/SVGTransform)

Ersetzt ein bestehendes 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 auszutauschenden Elements vor der Entfernung des Elements zugewiesen 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.
  • 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`](/de/docs/Web/API/SVGTransformList/removeItem)(in unsigned long index) [`SVGTransform`](/de/docs/Web/API/SVGTransform)

Entfernt ein bestehendes 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`](/de/docs/Web/API/SVGTransformList/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`](/de/docs/Web/API/SVGTransformList/createSVGTransformFromMatrix)(in [`DOMMatrix`](/de/docs/Web/API/DOMMatrix)) [`SVGTransform`](/de/docs/Web/API/SVGTransform) Erstellt ein SVGTransform-Objekt, das auf eine Transformation vom Typ SVG_TRANSFORM_MATRIX initialisiert ist und dessen Werte die gegebene Matrix sind. Die Werte aus der Parameter-Matrix werden kopiert, die Matrix-Parameter wird nicht als SVGTransform::matrix übernommen.
[`consolidate`](/de/docs/Web/API/SVGTransformList/consolidate)() [`SVGTransform`](/de/docs/Web/API/SVGTransform)

Konsolidiert die Liste der separaten SVGTransform-Objekte durch Multiplikation der äquivalenten Transformationsmatrizen miteinander, um eine Liste zu erhalten, die aus einem einzigen SVGTransform-Objekt vom Typ SVG_TRANSFORM_MATRIX besteht. Der Konsolidierungsvorgang erzeugt ein neues SVGTransform-Objekt als erstes und einziges Element in der Liste. Das zurückgegebene Element ist das Element selbst und keine Kopie. Alle Änderungen am Element 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.

Beispiele

Mehrere SVGTransform-Objekte verwenden

In diesem Beispiel erstellen wir eine Funktion, die drei verschiedene Transformationen auf das angeklickte SVG-Element anwendet. Dazu erstellen wir ein separates SVGTransform-Objekt für jede Transformation — wie translate, rotate und scale. Wir wenden mehrere Transformationen an, indem wir das Transformation-Objekt der SVGTransformList hinzufügen, die einem SVG-Element zugeordnet 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