SVGTextPathElement.spacing — Eigenschaft · JavaScript-Referenz

Signatur

SVGTextPathElement.spacing

Beschreibung

Die Eigenschaft spacing des Interfaces SVGTextPathElement spiegelt das SVG-Attribut spacing eines <textPath>-Elements wider. Sie legt fest, wie der Abstand zwischen den typografischen Zeichen berechnet wird, die entlang des Pfades gezeichnet werden.

Zurückgegeben wird ein SVGAnimatedEnumeration-Objekt. Dessen baseVal enthält den im Markup gesetzten Wert, animVal den aktuellen (ggf. animierten) Wert. Beide sind Zahlen, die den Konstanten des Interfaces entsprechen:

SVGTextPathElement.TEXTPATH_SPACINGTYPE_UNKNOWN (0) – unbekannter oder ungültiger Wert
SVGTextPathElement.TEXTPATH_SPACINGTYPE_AUTO (1) – entspricht spacing="auto": der Browser darf Abstände für eine optisch bessere Darstellung anpassen
SVGTextPathElement.TEXTPATH_SPACINGTYPE_EXACT (2) – entspricht spacing="exact" (Standardwert): Zeichen werden exakt nach Schriftmetrik und letter-spacing gesetzt

Die Eigenschaft selbst ist schreibgeschützt, der Wert lässt sich aber über spacing.baseVal oder über setAttribute('spacing', …) ändern. Nützlich ist sie vor allem, um in Skripten den Zustand eines Textpfades auszulesen oder programmatisch zu wechseln.

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal und animVal (jeweils number: 0 = unknown, 1 = auto, 2 = exact).

Beispiele

Aktuellen spacing-Wert auslesen

// <svg><path id="kurve" d="M10,90 Q100,10 190,90" fill="none"/>
//   <text><textPath id="tp" href="#kurve" spacing="auto">Hallo Welt</textPath></text></svg>
const textPath = document.getElementById('tp');
console.log(textPath.spacing.baseVal);
console.log(textPath.spacing.animVal);

1 1

Zahlenwert in lesbaren Namen übersetzen

const spacingName = (el) => {
  switch (el.spacing.baseVal) {
    case SVGTextPathElement.TEXTPATH_SPACINGTYPE_AUTO: return 'auto';
    case SVGTextPathElement.TEXTPATH_SPACINGTYPE_EXACT: return 'exact';
    default: return 'unknown';
  }
};

const tp = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
console.log(spacingName(tp)); // kein Attribut -> Standardwert
tp.setAttribute('spacing', 'auto');
console.log(spacingName(tp));

exact auto

spacing per baseVal umschalten

const tp = document.querySelector('textPath');
const toggleSpacing = () => {
  const { AUTO, EXACT } = {
    AUTO: SVGTextPathElement.TEXTPATH_SPACINGTYPE_AUTO,
    EXACT: SVGTextPathElement.TEXTPATH_SPACINGTYPE_EXACT
  };
  tp.spacing.baseVal = tp.spacing.baseVal === AUTO ? EXACT : AUTO;
  console.log(tp.getAttribute('spacing'));
};
toggleSpacing();

auto

// Wichtig · Fallstricke

Die Eigenschaft spacing ist schreibgeschützt – eine Zuweisung wie el.spacing = 1 wird ignoriert (im Strict Mode TypeError). Ändern Sie stattdessen spacing.baseVal oder das Attribut.
Das Setzen von baseVal auf 0 (unknown) oder einen ungültigen Wert löst einen TypeError aus.
Die DOM-Eigenschaft wird von allen modernen Browsern unterstützt, die visuelle Wirkung von spacing="auto" ist jedoch uneinheitlich: Viele Browser rendern auto und exact identisch. Für verlässliche Abstände besser letter-spacing oder textLength/lengthAdjust verwenden.
Fehlt das Attribut, liefert baseVal den Standardwert 2 (exact).

Siehe auch

SVGTextPathElement SVGTextPathElement.method SVGTextPathElement.startOffset SVGAnimatedEnumeration SVGTextContentElement.textLength HTMLTableColElement.span HTMLTableElement.cellSpacing