SVGForeignObjectElement.x — Eigenschaft · JavaScript-Referenz

Signatur

SVGForeignObjectElement.x

Beschreibung

Die Eigenschaft x des Interfaces SVGForeignObjectElement steht für das Attribut x eines <foreignObject>-Elements, also die horizontale Position der linken oberen Ecke im Benutzerkoordinatensystem. Mit <foreignObject> lassen sich HTML-Inhalte wie Formulare, umbrechender Text oder Videos in eine SVG-Grafik einbetten.

Die Eigenschaft selbst ist schreibgeschützt: Sie liefert ein SVGAnimatedLength-Objekt. Die Zuweisung el.x = 10 hat keine Wirkung. Den Wert liest und setzt man über das enthaltene SVGLength: x.baseVal ist der statische Attributwert und beschreibbar, x.animVal ist der aktuelle, gegebenenfalls durch SMIL animierte Wert und nur lesbar.

Über baseVal.value bekommt man den Wert in Benutzereinheiten (user units). baseVal.valueAsString liefert die Originalschreibweise, etwa "10%", und mit convertToSpecifiedUnits() wandelt man in andere Einheiten um. Fehlt das Attribut, ist der Wert 0.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein SVGAnimatedLength-Objekt mit baseVal (beschreibbares SVGLength) und animVal (nur lesbares SVGLength) für die x-Koordinate.

Beispiele

x-Koordinate auslesen

// <svg><foreignObject id="fo" x="20" y="10" width="200" height="100">…</foreignObject></svg>
const fo = document.getElementById('fo');

console.log(fo.x instanceof SVGAnimatedLength);
console.log(fo.x.baseVal.value);
console.log(fo.x.animVal.value);

true 20 20

HTML-Box per Skript verschieben

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');

const fo = document.createElementNS(svgNS, 'foreignObject');
fo.setAttribute('width', '160');
fo.setAttribute('height', '60');

const div = document.createElement('div');
div.textContent = 'HTML in SVG';
fo.append(div);
svg.append(fo);

// Wert über baseVal setzen, nicht über fo.x = …
fo.x.baseVal.value = 50;
console.log(fo.getAttribute('x'));

50

Prozentwerte und Einheiten umrechnen

// <svg width="400"><foreignObject id="fo" x="25%" …></svg>
const fo = document.getElementById('fo');
const len = fo.x.baseVal;

console.log(len.valueAsString);
console.log(len.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
console.log(len.value); // in Benutzereinheiten

// Einheit auf Pixel umstellen
len.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
console.log(fo.getAttribute('x'));

25% true 100 100px

// Wichtig · Fallstricke

Schreibgeschützt: fo.x = 100 wird ignoriert und wirft im Strict Mode einen TypeError. Nutze stattdessen fo.x.baseVal.value = 100 oder setAttribute('x', '100').
animVal ist nur lesbar. Schreibzugriffe darauf werfen einen NoModificationAllowedError.
Bei Prozent- oder em-Werten hängt baseVal.value vom Viewport bzw. von der Schriftgröße ab. Ist das Element nicht gerendert (z. B. display: none oder noch nicht im DOM), kann die Umrechnung einen NotSupportedError auslösen oder ungenau sein.
In SVG 2 ist x auch eine CSS-Eigenschaft (x: 20px). Eine CSS-Regel überschreibt das Attribut in der Darstellung, baseVal gibt aber weiterhin den Attributwert zurück.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Wie HTML-Inhalte in <foreignObject> gerendert werden (Transformationen, Zoom), unterscheidet sich teilweise zwischen den Browsern, vor allem in Safari.

Siehe auch

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