SVGImageElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGImageElement.y

Beschreibung

Die Eigenschaft y der Schnittstelle SVGImageElement gibt ein SVGAnimatedLength-Objekt zurück, das dem y-Attribut des <image>-Elements entspricht. Das Attribut legt die vertikale Position der oberen linken Ecke des eingebetteten Bildes im aktuellen Benutzerkoordinatensystem fest. Fehlt es, gilt der Wert 0.

Die Eigenschaft selbst ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Der enthaltene Wert lässt sich aber über y.baseVal (ein SVGLength) ändern, zum Beispiel über baseVal.value (in Benutzereinheiten), baseVal.valueAsString oder baseVal.newValueSpecifiedUnits(). Über y.animVal liest man den aktuellen Wert, auf den eine laufende SMIL-Animation (<animate>) gerade wirkt.

Typische Anwendungsfälle sind das Verschieben von Bildern per Skript, Drag-and-Drop in SVG-Editoren und das Auslesen einer Position mit Umrechnung zwischen Einheiten wie %, px oder em.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit den Eigenschaften baseVal (änderbarer Grundwert, SVGLength) und animVal (schreibgeschützter, gerade animierter Wert, SVGLength).

Beispiele

y-Position eines Bildes auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
img.setAttribute('href', 'logo.png');
img.setAttribute('y', '40');
svg.append(img);
document.body.append(svg);

console.log(img.y.baseVal.value);
console.log(img.y.baseVal.valueAsString);

40 "40"

Bild vertikal per Skript verschieben

const img = document.querySelector('svg image');

// Grundwert ändern – das Attribut y wird automatisch mitgeändert
img.y.baseVal.value += 25;
console.log(img.getAttribute('y'));

"65" (wenn y vorher 40 war)

Einheit setzen und umrechnen

const img = document.querySelector('svg image');
const len = img.y.baseVal;

// Position auf 10 % der Viewport-Höhe setzen
len.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 10);
console.log(img.getAttribute('y'));

// Wert in Benutzereinheiten (px) auslesen
console.log(len.value);

"10%" 30 (bei einem 300 px hohen SVG-Viewport)

Animierten Wert gegenüber Grundwert prüfen

const img = document.querySelector('#bild');
// <image id="bild" y="0"><animate attributeName="y" from="0" to="100" dur="2s" repeatCount="indefinite"/></image>

setInterval(() => {
  console.log(`Basis: ${img.y.baseVal.value}, animiert: ${img.y.animVal.value}`);
}, 500);

Basis: 0, animiert: 25.3 Basis: 0, animiert: 50.1 …

// Wichtig · Fallstricke

Schreibgeschützt: img.y = 50 hat keine Wirkung und wirft im Strict Mode einen TypeError. Ändern Sie stattdessen img.y.baseVal.value oder setzen Sie das Attribut mit setAttribute('y', …).
Prozentwerte: baseVal.value bei %-Angaben hängt vom Viewport ab. Ist das Element nicht im DOM oder nicht gerendert, kann das Ergebnis 0 sein, oder es wird ein Fehler geworfen.
CSS-Eigenschaft: In SVG 2 ist y auch eine Geometrie-Eigenschaft von CSS. Eine CSS-Regel wie image { y: 20px; } überschreibt das Attribut beim Rendern, baseVal gibt aber weiterhin den Wert des Attributs zurück.
animVal berücksichtigt nur SMIL-Animationen, keine CSS-Animationen und keine Web Animations.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Legen Sie Elemente mit createElementNS und dem SVG-Namensraum an, denn mit createElement('image') entsteht kein SVGImageElement.

Siehe auch

SVGImageElement SVGImageElement.x SVGImageElement.width SVGImageElement.height SVGAnimatedLength SVGLength HTMLImageElement.y