SVGPatternElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGPatternElement.x

Beschreibung

Die Eigenschaft x der Schnittstelle SVGPatternElement spiegelt das Attribut x des SVG-Elements <pattern> wider. Sie gibt an, bei welcher x-Koordinate die Musterkachel beginnt. Das bestimmt, wie das Kachelraster gegenüber der gefüllten Form verschoben ist. Zusammen mit y, width und height legt sie das Rechteck einer Musterkachel fest.

Die Eigenschaft selbst ist schreibgeschützt. Sie liefert ein SVGAnimatedLength-Objekt mit zwei Unterobjekten vom Typ SVGLength:

baseVal: der statische Grundwert aus dem Attribut. Er ist beschreibbar, zum Beispiel über baseVal.value oder baseVal.newValueSpecifiedUnits().
animVal: der aktuell wirksame Wert, falls eine SMIL-Animation wie <animate> läuft. Er ist schreibgeschützt.

Wie der Wert interpretiert wird, hängt von patternUnits ab. Bei objectBoundingBox (Standard) ist x ein Bruchteil der Bounding Box des gefüllten Elements, zum Beispiel 0.25. Bei userSpaceOnUse ist er eine Koordinate im Benutzerkoordinatensystem. Fehlt das Attribut, ist der Wert 0.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (beschreibbarer Grundwert als SVGLength) und animVal (schreibgeschützter, aktuell animierter Wert als SVGLength).

Beispiele

x-Koordinate eines Musters auslesen

// HTML: <svg><defs><pattern id="dots" x="5" y="5" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="4"/></pattern></defs></svg>
const pattern = document.getElementById('dots');

console.log(pattern.x instanceof SVGAnimatedLength);
console.log(pattern.x.baseVal.value);
console.log(pattern.x.baseVal.valueAsString);

true 5 5

Muster per Skript verschieben (Offset ändern)

const pattern = document.getElementById('dots');

// Grundwert direkt setzen – aktualisiert auch das Attribut
pattern.x.baseVal.value = 12;
console.log(pattern.getAttribute('x'));

// Alternativ mit expliziter Einheit (Prozent)
pattern.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(pattern.getAttribute('x'));

12 10%

Laufende Musterverschiebung animieren

// Erzeugt einen „wandernden“ Streifenhintergrund
const pattern = document.getElementById('dots');
const tileWidth = pattern.width.baseVal.value;
let offset = 0;

const step = () => {
  offset = (offset + 0.5) % tileWidth;
  pattern.x.baseVal.value = offset;
  requestAnimationFrame(step);
};
requestAnimationFrame(step);

Grundwert und animierten Wert vergleichen

// <pattern id="p" x="0" ...><animate attributeName="x" from="0" to="20" dur="2s" repeatCount="indefinite"/></pattern>
const p = document.getElementById('p');

setTimeout(() => {
  console.log('Basis:', p.x.baseVal.value);
  console.log('Animiert:', p.x.animVal.value.toFixed(1));
}, 1000);

Basis: 0 Animiert: 10.0

// Wichtig · Fallstricke

Nicht direkt zuweisen: pattern.x = 10 hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Im Strict Mode wird ein TypeError geworfen. Schreiben Sie stattdessen pattern.x.baseVal.value.
Einheiten beachten: baseVal.value liefert den Wert immer in Benutzereinheiten. Für Prozentangaben oder em nutzen Sie valueInSpecifiedUnits und unitType. Prozentwerte lassen sich nur umrechnen, wenn das Element im gerenderten Dokument hängt.
patternUnits: Bei objectBoundingBox bedeutet x = 0.5 eine Verschiebung um die halbe Breite der Bounding Box, nicht um 0,5 Pixel.
animVal ist schreibgeschützt. Ein Schreibversuch wirft eine NoModificationAllowedError-DOMException.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt, seit Langem auch in Chrome, Firefox, Safari und Edge.

Siehe auch

SVGPatternElement SVGPatternElement.y SVGPatternElement.width SVGPatternElement.height SVGPatternElement.patternUnits SVGAnimatedLength SVGLength