Suche…
Parameter
<text> | Einzelheiten |
|---|---|
| x | Die x-Position des Textes. |
| y | Die y-Position des Textes. |
| dx | Relative Verschiebung in x-Position. |
| dy | Relative Verschiebung in y-Position. |
| drehen | Gibt die Winkelverschiebung für Textzeichen an. |
| textLength | Passt den Text in die angegebene Länge ein. |
| lengthAdjust | Gibt an, ob nur Kerning oder Kerning & Glyphen komprimiert / gestreckt werden soll, um Text in die angegebene Textlänge anzupassen. Werte: Abstand oder AbstandAndGlyphs |
| - | Gemeinsame Parameter für alle Text-Chunking-Elemente (text, tref, textPath, tspan) |
| Textanker | Legt die horizontale Ausrichtung fest. Werte: Start, Mitte, Ende. |
| Grundlinienverschiebung | Verschiebt die Basislinie des Texts basierend auf Werten, die von der Schriftartentabelle für hochgestellte oder tiefgestellte Positionierung (Sub, Super) oder um einen positiven oder negativen Prozentwert oder eine positive Länge angegeben werden. Werte: sub, super,% oder length. |
Bemerkungen
baseline-shift wird von den aktuellsten Versionen von Firefox und Microsoft-Browsern ab Juli 2016 nicht unterstützt.
Text zeichnen
<svg xmlns="http://www.w3.org/2000/svg">
<text x="40" y="60" font-size="28">Hello World!</text>
</svg>
Die X- und Y-Koordinate gibt die Position der linken unteren Ecke des Texts an (sofern der Textanker nicht geändert wurde).
Super- und Index
Mit dem Parameter für den Basislinienversatz können Sie Super- oder Subskriptionen angeben. Dies wird jedoch nicht von allen gängigen Browsern unterstützt.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20">x<tspan baseline-shift="super">2</tspan></text>
<text x="10" y="60">f<tspan baseline-shift="sub">x</tspan></text>
</svg>
Für eine browserübergreifende Lösung können Sie dy, dx und die relative Schriftgröße verwenden.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="40">x<tspan dy="-7" font-size=".7em">2</tspan></text>
<text x="10" y="80">f<tspan dy="3" font-size=".7em">x</tspan></text>
</svg>
Text drehen
Die Eigenschaft Rotate dreht jedes Zeichen um den angegebenen Winkel.
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" rotate="30">Each character is rotated</text>
</svg>
Um das gesamte Textelement zu drehen, müssen Sie die transform -Eigenschaft verwenden.
<svg xmlns="http://www.w3.org/2000/svg">
<text transform="translate(10, 60) rotate(30)">The whole text is rotated</text>
</svg>
Einzelne Buchstabenpositionierung mit Arrays von X- und Y-Werten
<svg width="400px" height="200px">
<text x="1em, 2em, 3em, 4em, 5em" y="3em, 4em, 5em">
Individually Spaced Text
</text>
</svg>
Das Text-Element unterstützt die individuelle Platzierung von Buchstaben, indem es ein Array mit Werten für x und y akzeptiert.