textLength

<length-percentage>

Dieser Wert gibt die Breite des Raums an, den der Text anpassen soll, um ihn als absolute Länge oder Prozentsatz zu erreichen.

<number>

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

Dieses Beispiel zeigt Text, den Sie mithilfe eines <input>-Elements des Typs "range" in der Größe ändern können.

Beginnen wir mit dem SVG. Es ist ziemlich einfach, mit einem Raum von 1000 x 300 Pixeln, der in eine 10 cm x 3 cm 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 enthält zwei sichtbare Elemente, die in einer 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-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.

Schließlich werfen wir einen Blick auf den JavaScript-Code. Er beginnt damit, Referenzen zu den Elementen abzulegen, auf die zugegriffen werden 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;
  },
  false,
);

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

Nachdem die Elementreferenzen abgerufen wurden, wird ein Event-Listener eingerichtet, indem addEventListener() auf dem Schieberegler-Steuerelement aufgerufen wird, um auf alle input-Ereignisse zu reagieren, die auftreten. Diese Ereignisse werden jedes Mal gesendet, wenn sich der Wert des Schiebereglers ändert, auch wenn der Benutzer ihn noch nicht aufgehört hat zu bewegen, sodass wir die Textbreite responsiv 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 der SVGLength-Interfacetyp SVG_LENGTHTYPE_PX verwendet wird, um anzugeben, dass der Wert Pixel darstellt. Beachten Sie, dass wir zu textLength gehen müssen, um seine baseVal-Eigenschaft zu erhalten; textLength wird als ein SVGLength-Objekt gespeichert, daher können wir es nicht wie eine einfache Zahl behandeln.

Nachdem die Textbreite aktualisiert wurde, 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 ziehen, um ein Gefühl dafür zu bekommen, was er macht.

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