textLength

<length-percentage>

Dieser Wert gibt die Breite des Raums an, den der Text als absolute Länge oder Prozentsatz belegen soll.

<number>

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

Dieses Beispiel präsentiert Text, den Sie mit einem <input>-Element des Typs "range" in der Größe ändern können.

Beginnen wir mit dem SVG. Es ist ziemlich einfach, mit einem 1000 x 300 Pixel großen Bereich, der auf eine Box von 10 Zentimeter mal 3 Zentimeter abgebildet ist.

<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 umrahmen, das den Text enthalten soll. Dann wird <text> verwendet, um das Textelement selbst zu erstellen, mit einer id von "hello".

Das HTML umfasst zwei angezeigte Elemente, die in einem gruppierenden <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-Kontrollfeld zu erstellen, das der Benutzer manipulieren wird, um die Breite des Textes zu ändern. Ein <span>-Element mit der ID "widthDisplay" wird bereitgestellt, um den aktuellen Breitenwert anzuzeigen.

Abschließend werfen wir einen Blick auf den JavaScript-Code. Es beginnt damit, Referenzen auf die Elemente zu speichern, auf die zugegriffen werden muss, unter Verwendung von Document.getElementById():

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;
  },
  false,
);

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

Nach dem Abrufen der Elementreferenzen wird ein Ereignis-Listener durch Aufruf von addEventListener() auf das Schieberegler-Kontrollfeld 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 nicht mehr bewegt, sodass wir die Textbreite reaktionsschnell anpassen können.

Wenn ein "input"-Ereignis auftritt, rufen wir newValueSpecifiedUnits() auf, um den Wert von textLength auf den neuen Wert des Schiebereglers festzulegen, wobei der SVGLength-Schnittstelle der Typ SVG_LENGTHTYPE_PX verwendet wird, um anzugeben, dass der Wert Pixel repräsentiert. Beachten Sie, dass wir in textLength eintauchen müssen, um seine baseVal-Eigenschaft zu erhalten; textLength wird als SVGLength-Objekt gespeichert, sodass wir es nicht wie eine einfache Zahl behandeln können.

Nachdem die Textbreite aktualisiert wurde, wird der Inhalt des widthDisplay-Felds ebenfalls mit dem neuen Wert aktualisiert, und wir sind fertig.

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

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