Kommentar: Eine der leistungsstarken Fähigkeiten von SVG ist, dass sie Text auf eine Ebene steuern kann, die für Standard-HTML-Seiten unmöglich ist, ohne um Hilfe bei Bildern oder anderen Plug-Ins zu bitten. Obwohl SVGs Textrendering so leistungsfähig ist, gibt es immer noch einen Nachteil: SVG kann keine automatische Linienverpackung durchführen. Stellen Sie als nächstes die Darstellung von Text in SVG ein. Interessierte Freunde können darüber lernen, was hilfreich sein kann.
Text in SVG rendern
Eine der leistungsstarken Funktionen von SVG ist, dass es Text auf eine Ebene steuern kann, die für Standard -HTML -Seiten nicht möglich ist, ohne auf Bilder oder andere Plugins zurückzugreifen. Jede Aktion, die auf einer Form oder einem Pfad (z. B. Zeichnen oder Filterung) ausgeführt werden kann, kann im Text durchgeführt werden. Obwohl SVGs Textrendering so leistungsfähig ist, gibt es immer noch einen Nachteil: SVG kann keine automatische Linienverpackung durchführen. Wenn der Text länger als der erlaubte Raum ist, schneiden Sie ihn einfach ab. In den meisten Fällen erfordert das Erstellen mehrerer Textzeilen mehrere Textelemente.
Darüber hinaus können Sie das TSPAN -Element verwenden, um das Textelement in Abschnitte zu unterteilen, sodass jeder Abschnitt seinen eigenen Stil hat.
In Textelementen ähnelt auch die Verarbeitung von Leerzeichen HTML: Linienbrüche und Wagenrenditen werden zu Räumen, während mehrere Räume in einen einzelnen Raum komprimiert werden.
Text wird direkt im Bild - Textelement angezeigt
Um Text direkt anzuzeigen, können Sie wie folgt Textelemente verwenden:
<Svg>
<rect fill = "rot" />
<Kreis cx = "150" Cy = "100" r = "80" fill = "grün" />
<text x = "150" y = "125" font-size = "60" text-anchor = "Middle" fill = "White"> SVG </text>
</svg>
Wie im obigen Beispiel gezeigt, kann das Textelement die folgenden Eigenschaften festlegen:
x, y sind die Textpositionskoordinaten. Text-Anchor ist die Richtung der Textanzeige, die tatsächlich die Position (x, y) an der Position des Textes ist. Diese Eigenschaft hat drei Werte: Start, Mitte und Ende. Start bedeutet, dass sich die Textpositionskoordinate (x, y) am Anfang des Textes befindet und der Text von diesem Punkt nach rechts beginnt. Middle Means (x, y) befindet sich in der Mitte des Textes, und der Text wird in der linken und rechten Richtungen angezeigt, die tatsächlich zentriert ist. Ende bedeutet, dass (x, y) Punkte am Ende des Textes liegen und der Text nacheinander nach links angezeigt wird.Zusätzlich zu diesen Eigenschaften können die folgenden Eigenschaften in CSS oder direkt in den Eigenschaften angegeben werden:
Füllen, Schlaganfall: Füllen und Schlaganfallfarben, die spezifische Verwendung wird später zusammengefasst. Verwandte Attribute der Schriftart: Schriftfamilie, Schrift im Schriftart, Schriftgewicht, Schriftart, Schriftart, Schriftgröße, Schriftgröße, Kerning, Buchstabenabstand, Wortabstand und Textablagerung.Textintervall - TSPAN -Element
Dieses Element ist eine leistungsstarke Ergänzung zum Textelement; Es wird verwendet, um Text innerhalb eines Intervalls zu rendern; Es kann nur im Textelement oder in den untergeordneten Elementen des TSPAN -Elements erscheinen. Eine typische Verwendung besteht darin, die Anzeige eines Teils des Textes hervorzuheben. Zum Beispiel:
<text>
<tspan font-weight = "BOLD" fill = "rot"> Das ist fett und rot </tspan>
</text>
Das TSPAN -Element hat die folgenden Eigenschaften, die festgelegt werden können: x, y wird verwendet, um den absoluten Koordinatenwert des enthaltenen Textes festzulegen, der die Standardtextposition überschreibt. Diese Eigenschaften können eine Reihe von Zahlen enthalten, die auf jedes entsprechende Einzelzeichen angewendet werden. Zeichen, die keine entsprechenden Einstellungen haben, folgen dem vorherigen Charakter. Zum Beispiel:
<Text x = "10" y = "10"> Hallo Welt!
<tspan x = "100 200 300" font-weight = "BOLD" fill = "rot"> Dies ist fett und rot </tspan>
</text>
DX, DY wird verwendet, um den Versatz des enthaltenen Textes relativ zur Standardtextposition festzulegen. Diese Eigenschaften können auch eine Reihe von Zahlen enthalten, die jeweils auf das entsprechende Zeichen angewendet werden. Zeichen, die keine entsprechenden Einstellungen haben, folgen dem vorherigen Charakter. Sie können x vom obigen Beispiel in DX ändern, um den Effekt zu erkennen. Drehung wird verwendet, um den Drehwinkel der Schriftart zu setzen. Diese Eigenschaftsseite kann eine Reihe von Zahlen enthalten, die auf jedes Zeichen angewendet werden. Zeichen, die keine entsprechenden Einstellungen haben, verwenden den letzten Zahlensatz.
<Text x = "10" y = "10"> Hallo Welt!
<tspan rotate = "10 20 45" font-weight = "BOLD" fill = "rot"> Dies ist fett und rot </tspan>
</text>
Textlänge: Dies ist die rätselhafteste Eigenschaft. Es wird gesagt, dass diese Länge die Grundlage sein wird, wenn das Rendering feststellt, dass die Länge des Textes mit diesem Wert nicht mit diesem Wert nicht stimmt. Aber ich habe es nicht ausprobiert.
Textzitat - TREF -Element
Dieses Element ermöglicht den Verweis auf definierten Text und kopiert ihn effizient an den aktuellen Ort, normalerweise mit XLink: HREF -angegebenem Zielelement. Da es kopiert wurde, wird der ursprüngliche Text bei der Verwendung von CSS zum Ändern des aktuellen Textes nicht geändert. Siehe Beispiel:
<text> Dies ist ein Beispieltext. </text>
<text>
<tref xlink: href = "#Beispiel" />
</text>
Textpfad - Textpfadelement
Dies ist interessanter, der Effekt ist auch cool und kann viele künstlerische Effekte hervorrufen. Dieses Element nimmt den angegebenen Pfad von seinem Attribut von XLink: HREF aus und richtet den Text auf diesem Pfad aus, siehe Beispiel:
<Pfad d = "M 20,20 C 40,40 80,40 100,20" />
<text>
<textPath xlink: href = "#my_path"> Dieser Text folgt einer Kurve. </textPath>
</text>
Image in SVG - Bildelement rendern
Das Bildelement in SVG kann direkt die Anzeige von Rasterbildern unterstützen, was sehr einfach zu verwenden ist. Siehe das folgende Beispiel:
<Svg>
<Image XLink: href = "penguins.jpg" x = "0" y = "0"/>
</svg>
Ein paar Punkte hier zu beachten:
1. Wenn die X- oder Y -Koordinaten nicht festgelegt sind, beträgt die Standardeinstellung 0.
2. Wenn keine Breite oder Höhe festgelegt ist, beträgt die Standardeinstellung 0.
3. Wenn Breite oder Höhe explizit auf 0 eingestellt ist, wird das Rendern dieses Bildes verboten.
V.
5.Image ist ein regelmäßiges Element von SVG, genau wie andere Elemente, sodass es alle Effekte wie Zuschneiden, Maskieren, Filterung, Rotation usw. unterstützt.
Praktische Referenz:
Skriptindex: (v = vs.85) .aspx
Entwicklungszentrum: https://developer.mozilla.org/en/svg
Beliebte Referenzen:
Offizielle Dokumentation: