SVGPatternElement.patternTransform — Eigenschaft · JavaScript-Referenz

Signatur

SVGPatternElement.patternTransform

Beschreibung

Die Eigenschaft patternTransform des Interfaces SVGPatternElement spiegelt das gleichnamige Attribut eines <pattern>-Elements wider. Dieses Attribut enthält eine Liste von Transformationen (translate, rotate, scale, skewX, skewY, matrix). Sie wirken auf das gesamte Musterkoordinatensystem, also auf die Kachel und ihren Inhalt.

Zurückgegeben wird ein SVGAnimatedTransformList-Objekt mit zwei Listen: baseVal enthält den statischen Wert aus dem Attribut und lässt sich verändern. animVal enthält den aktuellen, gegebenenfalls durch SMIL-Animationen (<animateTransform>) veränderten Wert und ist nur lesbar.

Nur-lesbar ist dabei allein die Eigenschaft selbst: Du kannst ihr kein neues Objekt zuweisen. Die Liste in baseVal kannst du aber direkt bearbeiten, etwa mit appendItem(), clear() oder getItem(), oder einzelne SVGTransform-Einträge über setRotate(), setScale() und setTranslate() ändern. Solche Änderungen werden sofort ins Attribut übernommen. Das ist praktisch, um Muster dynamisch zu drehen oder zu skalieren, zum Beispiel für animierte Schraffuren oder interaktive Hintergründe.

Rückgabewert

Typ

SVGAnimatedTransformList

Beschreibung

Ein Objekt mit baseVal (bearbeitbare SVGTransformList) und animVal (nur-lesbare SVGTransformList mit dem aktuellen animierten Wert). Fehlt das Attribut, sind beide Listen leer.

Beispiele

Transformationen eines Musters auslesen

// <svg><defs><pattern id="streifen" width="10" height="10"
//   patternUnits="userSpaceOnUse" patternTransform="rotate(45) scale(2)">...</pattern></defs></svg>
const pattern = document.getElementById('streifen');
const liste = pattern.patternTransform.baseVal;

console.log(liste.numberOfItems);
for (let i = 0; i < liste.numberOfItems; i++) {
  const t = liste.getItem(i);
  // type: 4 = SVG_TRANSFORM_ROTATE, 3 = SVG_TRANSFORM_SCALE
  console.log(t.type, t.angle, t.matrix.a.toFixed(3));
}

2 4 45 0.707 3 0 2.000

Muster per Skript drehen (baseVal ändern)

const svg = document.querySelector('svg');
const pattern = svg.querySelector('pattern');
const liste = pattern.patternTransform.baseVal;

// Neue Transformation über das SVG-Wurzelelement erzeugen
const drehung = svg.createSVGTransform();
drehung.setRotate(30, 0, 0);

liste.clear();
liste.appendItem(drehung);

console.log(pattern.getAttribute('patternTransform'));

rotate(30)

Schraffur kontinuierlich animieren

const svg = document.querySelector('svg');
const pattern = svg.querySelector('#schraffur');
const liste = pattern.patternTransform.baseVal;

const t = svg.createSVGTransform();
liste.initialize(t); // Liste leeren und genau ein Element setzen

const tick = (zeit) => {
  const winkel = (zeit / 20) % 360;
  liste.getItem(0).setRotate(winkel, 5, 5);
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

// Wichtig · Fallstricke

Keine Zuweisung möglich: pattern.patternTransform = ... hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen baseVal oder setze das Attribut mit setAttribute('patternTransform', 'rotate(45)').
animVal ist nur lesbar: Schreibzugriffe darauf lösen einen NoModificationAllowedError aus.
Neue SVGTransform-Objekte erzeugst du nicht mit new, sondern mit SVGSVGElement.createSVGTransform() oder createSVGTransformFromMatrix().
Transformation per CSS: Nach SVG 2 lässt sich die Transformation auch über die CSS-Eigenschaft transform setzen. Wie das mit patternTransform zusammenspielt, unterscheidet sich je nach Browser. Verwende deshalb besser nur einen der beiden Wege.
Mehrere Transformationen werden von rechts nach links auf die Musterkoordinaten angewendet. Die Reihenfolge in der Liste ist also wichtig.
Zusammenfassen: consolidate() fasst alle Einträge zu einer einzigen Matrix-Transformation zusammen. Danach sind die ursprünglichen Typen wie rotate oder scale nicht mehr auslesbar.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

SVGPatternElement SVGAnimatedTransformList SVGTransformList SVGTransform SVGSVGElement.createSVGTransform() SVGGraphicsElement.transform SVGGradientElement.gradientTransform