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 dass sie auf Bilder oder andere Plugins zurückgreifen müssen. 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) zu Beginn des Textes befindet und der Text von diesem Punkt nach rechts nach rechts angezeigt wird. 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 id = "Beispiel"> 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:<path id = "my_path" 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: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Entwicklungszentrum: https://developer.mozilla.org/en/svg
Beliebte Referenz: http://www.chinasvg.com/
Offizielles Dokument: http://www.w3.org/tr/svg11/