textLength

<length-percentage>

Dieser Wert gibt die Breite des Bereichs an, in den der Text als absolute Länge oder Prozentsatz angepasst werden soll.

<number>

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

Dieses Beispiel zeigt Text, den Sie mit einem <input> Element vom Typ "range" in der Größe anpassen können.

Beginnen wir mit dem SVG. Es ist ziemlich einfach, mit einem 1000-zu-300-Pixel-Bereich, der in eine 10 Zentimeter mal 3 Zentimeter 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 umrahmen, das den Text enthält. Dann wird <text> verwendet, um das Textelement selbst zu erstellen, mit einer id von "hello".

Das HTML enthält zwei angezeigte Elemente, die in einem Gruppierungs-<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 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. Er beginnt damit, Referenzen zu den Elementen zu speichern, die er benötigt, 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"));

Nachdem die Elementreferenzen abgerufen wurden, wird ein Ereignis-Listener eingerichtet, indem addEventListener() auf dem Schieberegler-Steuerelement aufgerufen wird, um alle input Ereignisse zu empfangen, die auftreten. Diese Ereignisse werden gesendet, jedes Mal wenn sich der Wert des Schiebereglers ändert, selbst wenn der Benutzer ihn noch 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 zu setzen, wobei die SVGLength Schnittstelle's SVG_LENGTHTYPE_PX Einheitentyp verwendet wird, um anzuzeigen, dass der Wert Pixel darstellt. Beachten Sie, dass wir in textLength hineinsteigen müssen, um seine baseVal Eigenschaft zu erhalten; textLength wird als ein SVGLength Objekt gespeichert, sodass wir es nicht wie eine einfache Zahl behandeln können.

Nachdem die Textbreite aktualisiert wurde, werden auch die Inhalte des widthDisplay Feldes mit dem neuen Wert aktualisiert, und wir sind fertig.

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

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