SVGForeignObjectElement.y — Eigenschaft · JavaScript-Referenz

Signatur

SVGForeignObjectElement.y

Beschreibung

Die Eigenschaft y von SVGForeignObjectElement entspricht dem Attribut y des SVG-Elements <foreignObject>. Sie gibt an, wo die obere Kante des eingebetteten Bereichs im Benutzerkoordinatensystem liegt. In diesem Bereich lassen sich HTML-Inhalte, MathML oder andere XML-Namensräume innerhalb einer SVG-Grafik darstellen.

Die Eigenschaft selbst ist schreibgeschützt, du kannst ihr also kein neues Objekt zuweisen. Sie liefert aber ein SVGAnimatedLength-Objekt. Darin steckt in baseVal der gesetzte Grundwert und in animVal der aktuelle, eventuell animierte Wert. Beide sind vom Typ SVGLength. Über baseVal.value (in Benutzereinheiten) oder mit baseVal.newValueSpecifiedUnits() kannst du die Position trotzdem per Skript ändern.

Typische Einsatzfälle: HTML-Beschriftungen, Tooltips oder Formulare in Diagrammen positionieren, die Lage eines eingebetteten Bereichs für eigene Berechnungen auslesen oder Inhalte per Skript animieren, ohne mit Attribut-Strings zu arbeiten.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit baseVal (Grundwert) und animVal (aktueller Animationswert), beide vom Typ SVGLength. Fehlt das Attribut, ist der Wert 0.

Beispiele

y-Koordinate auslesen

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '200');

const fo = document.createElementNS(svgNS, 'foreignObject');
fo.setAttribute('x', '20');
fo.setAttribute('y', '40');
fo.setAttribute('width', '160');
fo.setAttribute('height', '60');
fo.innerHTML = '<div xmlns="http://www.w3.org/1999/xhtml">Hallo SVG</div>';

svg.append(fo);
document.body.append(svg);

console.log(fo.y.baseVal.value);
console.log(fo.y.animVal.value);

40 40

Position per Skript ändern (baseVal)

const fo = document.querySelector('foreignObject');

// Die Eigenschaft y ist schreibgeschützt, der Wert in baseVal aber nicht
fo.y.baseVal.value = 100;
console.log(fo.getAttribute('y'));

// Mit Einheit setzen: Prozent der Viewport-Höhe
fo.y.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 25);
console.log(fo.getAttribute('y'));

100 25%

HTML-Tooltip vertikal animieren

const fo = document.querySelector('#tooltip');
const startY = fo.y.baseVal.value;
let t = 0;

const schweben = () => {
  t += 0.05;
  fo.y.baseVal.value = startY + Math.sin(t) * 10;
  requestAnimationFrame(schweben);
};

requestAnimationFrame(schweben);

// Wichtig · Fallstricke

Eine direkte Zuweisung wirkt nicht: fo.y = 50 wird ignoriert und wirft im Strict Mode einen TypeError. Ändere stattdessen fo.y.baseVal.value oder nutze setAttribute('y', …).
baseVal.value liefert immer Benutzereinheiten. Bei Prozentangaben hängt der Wert vom Viewport ab. Die ursprüngliche Angabe bekommst du über valueInSpecifiedUnits und unitType.
In SVG 2 ist y auch eine Geometrie-Eigenschaft in CSS. Ein CSS-Wert wie foreignObject { y: 10px } überschreibt das Attribut für die Darstellung. baseVal zeigt aber weiterhin den Wert des Attributs.
animVal ist schreibgeschützt. Ein Schreibversuch führt zu einer NoModificationAllowedError-Ausnahme.
HTML innerhalb von <foreignObject> braucht beim Erzeugen per Skript den XHTML-Namensraum. Setze keine unbereinigten Benutzereingaben per innerHTML ein, sonst droht XSS.
Die Eigenschaft funktioniert in allen modernen Browsern. Der Internet Explorer unterstützt <foreignObject> nicht.

Siehe auch

SVGForeignObjectElement SVGForeignObjectElement.x SVGForeignObjectElement.width SVGForeignObjectElement.height SVGAnimatedLength SVGLength Window.originAgentCluster