textLength
Das textLength
-Attribut, verfügbar bei den SVG-Elementen
und
, ermöglicht es Ihnen, die Breite des Bereichs anzugeben, in den der Text gezeichnet wird. Der User Agent stellt sicher, dass der Text nicht über diese Distanz hinausgeht, wobei die Methode(n) verwendet werden, die durch das lengthAdjust
-Attribut angegeben sind. Standardmäßig wird nur der Abstand zwischen den Zeichen angepasst, aber die Glyphengröße kann ebenfalls angepasst werden, wenn Sie lengthAdjust
ändern.
Durch die Verwendung von textLength
können Sie sicherstellen, dass Ihr SVG-Text unabhängig von den Bedingungen in gleicher Breite angezeigt wird, einschließlich wenn Webfonts nicht geladen werden (oder noch nicht geladen wurden).
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
Anwendungshinweise
Interaktives Beispiel
Dieses Beispiel präsentiert Text, den Sie mit einem -Element des Typs
"range"
in der Größe ändern können.
CSS
.controls {
font:
16px "Open Sans",
"Arial",
sans-serif;
}
SVG
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.
Zuerst wird ein
-Element verwendet, um ein Rechteck zu erstellen und zu umrahmen, das den Text enthalten soll. Dann wird
verwendet, um das Textelement selbst zu erstellen, mit einer id
von "hello"
.
HTML
Das HTML umfasst zwei angezeigte Elemente, die in einem gruppierenden Das 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 Nach dem Abrufen der Elementreferenzen wird ein Ereignis-Listener durch Aufruf von Wenn ein Nachdem die Textbreite aktualisiert wurde, wird der Inhalt des So sieht das Beispiel aus. Versuchen Sie, den Schieberegler zu ziehen, um ein Gefühl dafür zu bekommen, was er bewirkt.-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 -Element mit der ID
"widthDisplay"
wird bereitgestellt, um den aktuellen Breitenwert anzuzeigen.JavaScript
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"));
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."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.widthDisplay
-Felds ebenfalls mit dem neuen Wert aktualisiert, und wir sind fertig.Ergebnis
Spezifikationen
Specification Scalable Vector Graphics (SVG) 2
# TextElementTextLengthAttributeBrowser-Kompatibilität
svg.elements.text.textLength
svg.elements.textPath.textLength
svg.elements.tspan.textLength
Siehe auch
SVGAnimatedLength
und SVGLength