textLength

<length-percentage>

Dieser Wert gibt die Breite des Bereichs an, den der Text bei der Anpassung einnimmt, entweder als absolute Länge oder als Prozentsatz.

<number>

Ein numerischer Wert beschreibt eine Länge, die sich auf die Einheiten des aktuellen Koordinatensystems bezieht.

Lassen Sie uns ein einfaches Beispiel erstellen, das Text präsentiert, den Sie mit einem <input>-Element vom Typ "range" in der Größe ändern können.

Beginnen wir mit dem SVG. Es ist ziemlich einfach, mit einem 1000-mal-300-Pixel-Raum, der in eine 10-Zentimeter-mal-3-Zentimeter-Box gemappt 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 einer id von "hello".

Das HTML ist ebenfalls einfach, mit nur zwei angezeigten Elementen, 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 den Schieberegler zu erzeugen, den der Benutzer betätigt, um die Breite des Textes zu ändern. Ein <span>-Element mit der ID "widthDisplay" wird bereitgestellt, um den aktuellen Breitenwert anzuzeigen.

Schließlich werfen wir einen Blick auf den JavaScript-Code. Zuerst werden Referenzen auf die Elemente gespeichert, auf die zugegriffen werden muss, wobei 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;
  },
  false,
);

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

Nachdem die Elementreferenzen abgerufen wurden, wird ein Ereignislistener eingerichtet, indem addEventListener() auf dem Schieberegler aufgerufen wird, um alle input-Ereignisse, die auftreten, zu empfangen. Diese Ereignisse werden gesendet, sobald sich der Wert des Schiebereglers ändert, auch wenn der Benutzer ihn noch bewegt, so dass 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 einzustellen, wobei der SVGLength-Schnittstelle der SVG_LENGTHTYPE_PX-Einheitentyp verwendet wird, um anzugeben, dass der Wert Pixel darstellt. Beachten Sie, dass wir in textLength auf dessen baseVal-Eigenschaft zugreifen müssen; textLength wird als SVGLength-Objekt gespeichert, daher können wir es nicht wie eine einfache Zahl behandeln.

Nach dem Aktualisieren der Textbreite werden die Inhalte des widthDisplay-Felds ebenfalls mit dem neuen Wert aktualisiert, und wir sind fertig.

So sieht das Beispiel aus. Versuchen Sie, den Schieberegler zu verschieben, um ein Gefühl für seine Wirkung zu bekommen.

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