textLength

Beispiel

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <text y="20" textLength="6em">Small text length</text>
  <text y="40" textLength="120%">Big text length</text>
</svg>

Verwendungshinweise

<length-percentage>

Dieser Wert gibt die Breite des Bereichs, an den der Text angepasst wird, als absolute Länge oder Prozentwert an.

<number>

Ein numerischer Wert gibt eine Länge in den Einheiten des aktuellen Koordinatensystems an.

Interaktives Beispiel

In diesem Beispiel können Sie die Breite eines Textes mit einem <input>-Element vom Typ "range" ändern.

SVG

Beginnen wir mit dem SVG. Es ist recht einfach: Ein Bereich von 1000 × 300 Pixeln wird auf einen Rahmen von 10 × 3 Zentimetern abgebildet.

<svg
  width="10cm"
  height="3cm"
  viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg">
  <rect
    x="1"
    y="1"
    width="998"
    height="298"
    fill="none"
    stroke="green"
    stroke-width="2" />

  <text
    id="hello"
    x="10"
    y="150"
    font-family="sans-serif"
    font-size="60"
    fill="green">
    Hello world!
  </text>
</svg>

Zunächst wird mit einem <rect>-Element ein umrandetes Rechteck erstellt, das den Text aufnimmt. Anschließend wird mit <text> das Textelement selbst erstellt, mit einer id von "hello".

HTML

Das HTML enthält zwei angezeigte Elemente innerhalb eines umschließenden <div>-Elements:

<div class="controls">
  <input type="range" id="widthSlider" min="80" max="978" />
  <span id="widthDisplay"></span>
</div>

Mit dem <input>-Element vom Typ "range" wird der Schieberegler erstellt, mit dem die Breite des Textes geändert werden kann. Ein <span>-Element mit der ID "widthDisplay" zeigt den aktuellen Breitenwert an.

CSS

.controls {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
}

JavaScript

Sehen wir uns zum Schluss den JavaScript-Code an. Zunächst speichert er mithilfe von Document.getElementById() Verweise auf die Elemente, auf die er zugreifen muss:

const widthSlider = document.getElementById("widthSlider");
const widthDisplay = document.getElementById("widthDisplay");
const textElement = document.getElementById("hello");
const baseLength = Math.floor(textElement.textLength.baseVal.value);

widthSlider.value = baseLength;

widthSlider.addEventListener("input", (event) => {
  textElement.textLength.baseVal.newValueSpecifiedUnits(
    SVGLength.SVG_LENGTHTYPE_PX,
    widthSlider.valueAsNumber,
  );
  widthDisplay.innerText = widthSlider.value;
});

widthSlider.dispatchEvent(new Event("input"));

Nachdem die Elementverweise abgerufen wurden, wird durch Aufrufen von addEventListener() für den Schieberegler ein Event Listener eingerichtet, der input-Events empfängt. Diese Events werden bei jeder Änderung des Schiebereglerwerts ausgelöst, auch wenn die Bewegung noch nicht abgeschlossen ist. So kann die Textbreite unmittelbar angepasst werden.

Wenn ein "input"-Event auftritt, rufen wir newValueSpecifiedUnits() auf, um den Wert von textLength auf den neuen Wert des Schiebereglers zu setzen. Dabei geben wir mit dem Einheitentyp SVG_LENGTHTYPE_PX des SVGLength-Interfaces an, dass der Wert Pixel darstellt. Beachten Sie, dass wir über textLength auf dessen Eigenschaft baseVal zugreifen müssen: textLength wird als SVGLength-Objekt gespeichert und kann daher nicht wie eine einfache Zahl behandelt werden.

Nachdem die Textbreite geändert wurde, wird auch der Inhalt des widthDisplay-Elements mit dem neuen Wert aktualisiert. Damit sind wir fertig.

Ergebnis

So sieht das Beispiel aus. Verschieben Sie den Schieberegler, um zu sehen, wie er sich auf den Text auswirkt.

Spezifikationen

Browser-Kompatibilität

svg.elements.text.textLength

svg.elements.textPath.textLength

svg.elements.tspan.textLength

Siehe auch

• SVG-Tutorial: Texte
• SVGAnimatedLength und SVGLength
• <text>