SVGTextContentElement.lengthAdjust — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextContentElement.lengthAdjust

Beschreibung

Die schreibgeschützte Eigenschaft lengthAdjust des Interfaces SVGTextContentElement gibt ein SVGAnimatedEnumeration-Objekt zurück. Es spiegelt das SVG-Attribut lengthAdjust von Elementen wie <text>, <tspan> und <textPath> wider. Das Attribut legt fest, wie der Browser einen Text auf die mit textLength vorgegebene Länge bringt.

Der Wert ist eine der folgenden numerischen Konstanten von SVGTextContentElement:

LENGTHADJUST_UNKNOWN (0): unbekannter oder ungültiger Wert
LENGTHADJUST_SPACING (1): Nur die Abstände zwischen den Zeichen werden angepasst. Das ist der Standardwert (lengthAdjust="spacing").
LENGTHADJUST_SPACINGANDGLYPHS (2): Abstände und Glyphen werden gestreckt oder gestaucht (lengthAdjust="spacingAndGlyphs").

Die Eigenschaft selbst ist schreibgeschützt. Ändern kannst du den Wert aber über lengthAdjust.baseVal. lengthAdjust.animVal enthält den aktuell wirksamen Wert, also den Wert nach einer eventuellen SMIL-Animation. Das ist praktisch für Überschriften, Beschriftungen in Diagrammen oder Logos, die unabhängig von der Schriftart genau eine bestimmte Breite ausfüllen sollen.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Ein Objekt mit baseVal (lesbar und schreibbar, number) und animVal (nur lesbar, number). Beide enthalten eine der Konstanten LENGTHADJUST_*.

Beispiele

Aktuellen Wert auslesen und als Text anzeigen

const svgNS = 'http://www.w3.org/2000/svg';
const text = document.createElementNS(svgNS, 'text');
text.setAttribute('textLength', '200');
text.setAttribute('lengthAdjust', 'spacingAndGlyphs');

const namen = {
  [SVGTextContentElement.LENGTHADJUST_UNKNOWN]: 'unknown',
  [SVGTextContentElement.LENGTHADJUST_SPACING]: 'spacing',
  [SVGTextContentElement.LENGTHADJUST_SPACINGANDGLYPHS]: 'spacingAndGlyphs'
};

console.log(text.lengthAdjust.baseVal);
console.log(namen[text.lengthAdjust.baseVal]);

2 spacingAndGlyphs

Standardwert ohne gesetztes Attribut

const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
console.log(text.lengthAdjust.baseVal === SVGTextContentElement.LENGTHADJUST_SPACING);
console.log(text.getAttribute('lengthAdjust'));

true null

Überschrift auf feste Breite strecken

// HTML: <svg width="400" height="60"><text id="titel" x="10" y="40">Programmierung</text></svg>
const titel = document.querySelector('#titel');
titel.setAttribute('textLength', '380');

// Glyphen mitstrecken statt nur die Abstände zu vergrößern
titel.lengthAdjust.baseVal = SVGTextContentElement.LENGTHADJUST_SPACINGANDGLYPHS;

console.log(titel.getAttribute('lengthAdjust'));

spacingAndGlyphs

// Wichtig · Fallstricke

Nur mit textLength wirksam: Ist kein textLength gesetzt, hat lengthAdjust keinen sichtbaren Effekt.
Nicht direkt zuweisen: el.lengthAdjust = 2 hat keine Wirkung, weil die Eigenschaft schreibgeschützt ist. Ändere stattdessen el.lengthAdjust.baseVal oder das Attribut per setAttribute('lengthAdjust', …).
Ungültige Werte: Wenn du baseVal auf 0 (LENGTHADJUST_UNKNOWN) oder auf einen Wert außerhalb des Bereichs setzt, lösen Browser einen TypeError aus. Ein ungültiger Attributwert im Markup ergibt beim Lesen dagegen den Standardwert 1.
Die Konstanten stehen sowohl am Interface (SVGTextContentElement.LENGTHADJUST_SPACING) als auch an jeder Instanz zur Verfügung.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Wie die Glyphen bei spacingAndGlyphs gestreckt werden, kann sich je nach Rendering-Engine leicht unterscheiden.

Siehe auch

SVGTextContentElement SVGTextContentElement.textLength SVGAnimatedEnumeration SVGTextContentElement.getComputedTextLength() Element.setAttribute() TextTrackCueList.length