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>

Nutzungshinweise

<length-percentage>

Dieser Wert gibt die Breite des Raums an, der der Text ausfüllen soll, entweder als absolute Länge oder als Prozentsatz.

<number>

Ein numerischer Wert definiert eine Länge in Bezug auf die Einheiten des aktuellen Koordinatensystems.

Interaktives Beispiel

Dieses Beispiel zeigt Text, den Sie mit einem <input> Element vom Typ "range" skalieren können.

CSS

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

SVG

Beginnen wir mit dem SVG. Es ist ziemlich einfach gehalten, mit einem 1000 mal 300 Pixel großen Bereich, der in eine 10 Zentimeter mal 3 Zentimeter große Box abgebildet wird.

<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>

Zuerst wird ein <rect> Element verwendet, um ein Rechteck zu erstellen und zu umranden, das den Text enthält. Dann wird <text> verwendet, um das Textelement selbst zu erstellen, mit einem id von "hello".

HTML

Das HTML enthält zwei angezeigte Elemente, die in einer Gruppierung <div> enthalten sind:

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

Das <input> Element vom Typ "range" wird verwendet, um das Schieberegler-Steuerelement zu erstellen, das der Benutzer manipuliert, um die Breite des Textes zu ändern. Ein <span> Element mit der ID "widthDisplay" wird bereitgestellt, um den aktuellen Breitenwert anzuzeigen.

JavaScript

Schließlich werfen wir einen Blick auf den JavaScript-Code. Es beginnt damit, Referenzen auf die Elemente zu speichern, auf die es zugreifen muss, indem Document.getElementById() verwendet wird:

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 Elementreferenzen abgerufen wurden, wird ein Ereignislistener durch Aufruf von addEventListener() auf dem Schieberegler-Steuerelement eingerichtet, um alle input Ereignisse zu empfangen, die auftreten. Diese Ereignisse werden jedes Mal gesendet, wenn sich der Wert des Schiebereglers ändert, selbst wenn der Benutzer ihn noch nicht losgelassen hat, sodass wir die Textbreite responsiv anpassen können.

Wenn ein "input" Ereignis eintritt, rufen wir newValueSpecifiedUnits() auf, um den textLength Wert auf den neuen Wert des Schiebereglers festzulegen, unter Verwendung des SVGLength Interface's SVG_LENGTHTYPE_PX Einheitstyps, um anzugeben, dass der Wert Pixel darstellt. Beachten Sie, dass wir in textLength eintauchen müssen, um auf seine baseVal Eigenschaft zuzugreifen; textLength wird als ein SVGLength Objekt gespeichert, sodass wir es nicht wie eine einfache Zahl behandeln können.

Nach dem Aktualisieren der Textbreite wird der Inhalt des widthDisplay Blocks ebenfalls mit dem neuen Wert aktualisiert, und wir sind fertig.

Ergebnis

So sieht das Beispiel aus. Versuchen Sie, den Schieberegler zu verschieben, um ein Gefühl dafür zu bekommen, was er bewirkt.

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>