SVGForeignObjectElement.width — Eigenschaft · JavaScript-Referenz

Signatur

SVGForeignObjectElement.width

Beschreibung

Die Eigenschaft width der Schnittstelle SVGForeignObjectElement gibt die Breite eines <foreignObject>-Elements zurück. Das ist die Breite des rechteckigen Bereichs, in dem fremde Inhalte, meist HTML, innerhalb einer SVG-Grafik gezeichnet werden. Der Wert entspricht dem Attribut width bzw. der gleichnamigen CSS-Geometrie-Eigenschaft.

Die Eigenschaft selbst ist schreibgeschützt. Sie liefert aber ein SVGAnimatedLength-Objekt, über das Sie den Wert lesen und ändern können:

width.baseVal: der statische Grundwert als SVGLength. Er ist beschreibbar, etwa über value, valueInSpecifiedUnits oder newValueSpecifiedUnits().
width.animVal: der aktuelle Wert während einer SMIL-Animation. Er ist nur lesbar.

Typische Einsatzfälle sind dynamische Diagramme, Beschriftungen mit HTML-Umbruch, Formulare oder Tooltips innerhalb einer SVG-Grafik. Dort muss sich die Breite des eingebetteten Bereichs zur Laufzeit an Daten oder an die Größe der Anzeige anpassen. Setzen Sie keine Breite oder den Wert 0, wird der Inhalt nicht angezeigt.

Rückgabewert

Typ

SVGAnimatedLength

Beschreibung

Ein Objekt mit den Eigenschaften baseVal und animVal, beide vom Typ SVGLength. Der Standardwert ist 0, wenn kein width-Attribut gesetzt ist. Bei auto verhält sich der Wert wie 0.

Beispiele

Breite auslesen

// <svg width="300" height="200"><foreignObject id="fo" x="10" y="10" width="160" height="80">...</foreignObject></svg>
const fo = document.querySelector('#fo');

console.log(fo.width.baseVal.value);          // Wert in Benutzereinheiten
console.log(fo.width.baseVal.unitType === SVGLength.SVG_LENGTHTYPE_NUMBER);
console.log(fo.width.animVal.value);

160 true 160

foreignObject dynamisch erzeugen und Breite setzen

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

const fo = document.createElementNS(SVG_NS, 'foreignObject');
fo.setAttribute('x', '20');
fo.setAttribute('y', '20');
fo.setAttribute('height', '60');

// Breite über die DOM-Schnittstelle statt über setAttribute setzen
fo.width.baseVal.value = 220;

const div = document.createElement('div');
div.textContent = 'HTML-Text mit automatischem Zeilenumbruch im SVG.';
fo.append(div);
svg.append(fo);

console.log(fo.getAttribute('width'));

220

Breite in Prozent angeben und in Pixel umrechnen

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

// 50 % der Breite des SVG-Viewports
fo.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 50);

console.log(fo.getAttribute('width'));          // Attribut wird synchronisiert
console.log(fo.width.baseVal.valueInSpecifiedUnits);
console.log(fo.width.baseVal.value);            // aufgelöster Wert, z. B. bei 300 px breitem SVG

50% 50 150

Breite an den Inhalt anpassen (Tooltip)

const fo = document.querySelector('#tooltip');
const box = fo.querySelector('div');

const updateTooltip = (text) => {
  box.textContent = text;
  // Breite vorübergehend groß setzen, damit der Inhalt frei gemessen werden kann
  fo.width.baseVal.value = 1000;
  const needed = Math.ceil(box.scrollWidth) + 16; // Innenabstand
  fo.width.baseVal.value = Math.min(needed, 280);
};

updateTooltip('Umsatz Q3: 12.400 €');
console.log(fo.width.baseVal.value > 0);

true

// Wichtig · Fallstricke

Keine direkte Zuweisung: fo.width = 200 hat keine Wirkung, im Strict Mode wird ein TypeError geworfen. Ändern Sie stattdessen fo.width.baseVal.value, oder verwenden Sie setAttribute('width', …).
animVal ist schreibgeschützt: Wenn Sie in animVal schreiben, wird eine NoModificationAllowedError-Ausnahme ausgelöst.
CSS hat Vorrang: Seit SVG 2 ist width auch eine CSS-Eigenschaft. Eine Breite, die per CSS gesetzt ist, überschreibt das Attribut für die Darstellung. baseVal spiegelt aber nur das Attribut wider. Die tatsächlich gezeichnete Größe ermitteln Sie mit getBBox() oder getBoundingClientRect().
Prozentwerte: Sie beziehen sich auf den nächsten SVG-Viewport. Werte in %, em usw. kann value erst auflösen, wenn das Element im Dokument eingehängt ist.
Namensraum: Erzeugen Sie das Element mit document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'). Mit createElement entsteht ein unbekanntes HTML-Element ohne die Eigenschaft width.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Die Darstellung von HTML in foreignObject unterscheidet sich jedoch teilweise, etwa bei Transformationen und beim Überlauf in Safari. Testen Sie deshalb in allen Zielbrowsern.
Sicherheit: Wenn Sie HTML-Inhalte über innerHTML in ein foreignObject einfügen, gelten dieselben XSS-Risiken wie im normalen DOM. Bereinigen Sie Eingaben von Nutzern daher vorher.

Siehe auch

SVGForeignObjectElement SVGForeignObjectElement.height SVGForeignObjectElement.x SVGForeignObjectElement.y SVGAnimatedLength SVGLength SVGGraphicsElement.getBBox()