SVGPatternElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGPatternElement.y

Beschreibung

Die Eigenschaft y der Schnittstelle SVGPatternElement entspricht dem Attribut y eines <pattern>-Elements. Sie legt fest, wo auf der y-Achse die Musterkachel beginnt. Zusammen mit x, width und height beschreibt sie das Rechteck, das beim Füllen der Fläche wiederholt wird.

Zurückgegeben wird ein SVGAnimatedLength-Objekt. Die Eigenschaft selbst ist schreibgeschützt, die enthaltene Länge aber nicht: Über y.baseVal (ein SVGLength) liest und setzt du den Grundwert, y.animVal liefert den aktuellen, eventuell per SMIL animierten Wert (nur lesbar).

Wie der Wert gedeutet wird, hängt von patternUnits ab. Bei objectBoundingBox (Standard) ist y ein Bruchteil der Begrenzungsbox des gefüllten Elements (z. B. 0.25), bei userSpaceOnUse eine Koordinate im Benutzerkoordinatensystem. Praktisch ist das, wenn du ein Muster zur Laufzeit verschieben willst, etwa für animierte Streifen oder zum Ausrichten von Kacheln an einem Raster.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Objekt mit baseVal (änderbares SVGLength, Grundwert des Attributs) und animVal (nur lesbares SVGLength, aktueller animierter Wert). Fehlt das Attribut, ist der Wert 0.

Beispiele

y-Koordinate eines Musters auslesen

// <svg><defs><pattern id="punkte" x="0" y="5" width="20" height="20" patternUnits="userSpaceOnUse">...</pattern></defs></svg>
const pattern = document.getElementById('punkte');

console.log(pattern.y.baseVal.value);          // Zahlenwert in Benutzereinheiten
console.log(pattern.y.baseVal.valueAsString);  // Wert als String
console.log(pattern.y.animVal.value);          // aktueller (animierter) Wert

5 "5" 5

Muster zur Laufzeit verschieben

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const defs = svg.querySelector('defs') ?? svg.appendChild(document.createElementNS(svgNS, 'defs'));

const pattern = document.createElementNS(svgNS, 'pattern');
pattern.id = 'streifen';
pattern.setAttribute('patternUnits', 'userSpaceOnUse');
pattern.setAttribute('width', '10');
pattern.setAttribute('height', '10');

const linie = document.createElementNS(svgNS, 'rect');
linie.setAttribute('width', '10');
linie.setAttribute('height', '3');
linie.setAttribute('fill', 'steelblue');
pattern.append(linie);
defs.append(pattern);

// Grundwert über baseVal setzen – das Attribut wird automatisch aktualisiert
pattern.y.baseVal.value = 4;
console.log(pattern.getAttribute('y'));

"4"

Laufende Streifen-Animation mit requestAnimationFrame

const pattern = document.getElementById('streifen');
let versatz = 0;

const tick = () => {
  versatz = (versatz + 0.5) % 10; // Kachelhöhe = 10
  pattern.y.baseVal.value = versatz;
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

Wert mit Einheit setzen und umrechnen

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

// Prozentangabe setzen
pattern.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(pattern.getAttribute('y'));

// In Benutzereinheiten umrechnen
pattern.y.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER);
console.log(pattern.y.baseVal.value);

"10%" (abhängig von der Viewport-Höhe, z. B. 15)

// Wichtig · Fallstricke

Nur lesbar: pattern.y = 10 hat keine Wirkung (im Strict Mode gibt es einen TypeError). Ändere stattdessen pattern.y.baseVal.value oder nutze setAttribute('y', …).
animVal ist nur lesbar. Wenn du es beschreibst, wird ein NoModificationAllowedError ausgelöst.
Einheiten beachten: Bei patternUnits="objectBoundingBox" (Standard) bedeutet y.baseVal.value = 5 das Fünffache der Höhe der Begrenzungsbox und nicht 5 Pixel. Für Pixelwerte setzt du patternUnits="userSpaceOnUse".
Erbt das Muster über href/xlink:href von einem anderen <pattern>, spiegelt y nur das eigene Attribut wider, nicht den geerbten Wert.
patternTransform wird zusätzlich angewendet. y gibt also die Position vor dieser Transformation an.
Kompatibilität: Die Eigenschaft wird von allen aktuellen Browsern seit Langem unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGPatternElement SVGPatternElement.x SVGPatternElement.width SVGPatternElement.height SVGPatternElement.patternUnits SVGAnimatedLength SVGLength