Einführung in SVG 2D in HTML5 3 – Einführung in Text, Bilder und Rendering text_html5 Tutorial-Fähigkeiten

Text in SVG rendern

Eine der leistungsstarken Funktionen von SVG besteht darin, dass es Text in einem Ausmaß steuern kann, das mit Standard-HTML-Seiten nicht möglich ist, ohne auf Bilder oder andere Plug-Ins zurückgreifen zu müssen. Jeder Vorgang, der an einer Form oder einem Pfad ausgeführt werden kann (z. B. Malen oder Filtern), kann auch an Text ausgeführt werden. Obwohl die Textwiedergabe von SVG so leistungsstark ist, gibt es dennoch ein Manko: SVG kann keinen automatischen Zeilenumbruch durchführen. Wenn der Text länger ist als der zulässige Platz, schneiden Sie ihn einfach ab. In den meisten Fällen sind für die Erstellung von mehrzeiligem Text mehrere Textelemente erforderlich.
Darüber hinaus können Sie das tspan-Element verwenden, um ein Textelement in mehrere Teile zu unterteilen, sodass jeder Teil seinen eigenen Stil hat.

Außerdem werden Leerzeichen im Textelement ähnlich wie in HTML behandelt: Zeilenvorschübe und Wagenrückläufe werden zu Leerzeichen, und mehrere Leerzeichen werden zu einem einzigen Leerzeichen komprimiert.

Direkt im Bild angezeigter Text - Textelement
Um Text direkt anzuzeigen, können Sie das Textelement wie folgt verwenden:

x,y sind die Textpositionskoordinaten. Textanker ist die Richtung der Textanzeige, die eigentlich die Position (x, y) des Textes ist. Dieses Attribut hat drei Werte: Start, Mitte und Ende. Start bedeutet, dass sich die Textpositionskoordinaten (x, y) am Anfang des Textes befinden und der Text ab diesem Punkt nacheinander rechts angezeigt wird. Mitte bedeutet, dass sich (x, y) in der Mitte des Textes befindet und der Text in beide Richtungen angezeigt wird, was tatsächlich zentriert ist. Ende bedeutet, dass sich der (x, y)-Punkt am Ende des Textes befindet und der Text nacheinander links angezeigt wird.
Zusätzlich zu diesen Attributen können die folgenden Attribute in CSS oder direkt in Attributen angegeben werden: Füllung, Strich: Füll- und Strichfarben. Die spezifische Verwendung wird später zusammengefasst. Verwandte Attribute der Schriftart: Schriftfamilie, Schriftstil, Schriftstärke, Schriftvariante, Schriftstreckung, Schriftgröße, Schriftgrößenanpassung, Unterschneidung, Buchstabenabstand, Wortabstand und Textdekoration.

Textbereich – tspan-Element
Dieses Element ist eine leistungsstarke Ergänzung zum Textelement; es wird zum Rendern von Text innerhalb eines Bereichs verwendet; es kann nur in Textelementen oder tspan erscheinen Elemente in untergeordneten Elementen. Eine typische Verwendung besteht darin, einen Teil des Textes hervorzuheben. Zum Beispiel:


Das ist fett und rot



Das tspan-Element verfügt über die folgenden Attribute: x, y werden verwendet, um die absoluten Koordinaten des enthaltenen Textes festzulegen. Dieser Wert überschreibt die Standardtextposition. Diese Eigenschaften können eine Folge von Zahlen enthalten, die auf jedes entsprechende einzelne Zeichen angewendet werden. Zeichen ohne entsprechende Einstellungen folgen sofort dem vorherigen Zeichen. Zum Beispiel:

Code kopierenDer Code lautet wie folgt:

Hallo Welt!

Das ist fett und rot


dx,dy wird verwendet, um den Versatz des eingefügten Texts relativ zur Standardtextposition festzulegen. Diese Eigenschaften können auch eine Reihe von Zahlen enthalten, die jeweils auf das entsprechende Zeichen angewendet werden. Zeichen ohne entsprechende Einstellungen folgen sofort dem vorherigen Zeichen. Sie können x im obigen Beispiel durch dx ersetzen, um den Effekt zu sehen. Mit Rotieren wird der Drehwinkel der Schriftart festgelegt. Diese Eigenschaftenseite kann eine Reihe von Zahlen enthalten, die für jedes Zeichen gelten. Zeichen ohne entsprechende Einstellung verwenden die zuletzt eingestellte Zahl.

Code kopierenDer Code lautet wie folgt:

Hallo Welt!

Das ist fett und rot
< /text>


textLength: Dies ist das rätselhafteste Attribut. Es wird gesagt, dass diese Länge Vorrang hat, wenn beim Rendern festgestellt wird, dass die Länge des Textes nicht mit diesem Wert übereinstimmt. Aber ich habe es nicht ausprobiert.

Textreferenz – tref-Element
Mit diesem Element können Sie auf definierten Text verweisen und ihn effizient an die aktuelle Position kopieren, normalerweise in Verbindung mit xlink:href, um das Zielelement anzugeben. Da es sich um eine Kopie handelt, wird der Originaltext nicht geändert, wenn Sie CSS zum Ändern des aktuellen Texts verwenden. Schauen Sie sich das Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Dies ist ein Beispieltext.


< /text>

Textpfad - textPath-Element
Das ist interessanter, der Effekt ist auch cool und kann viele künstlerische Effekte erzeugen; dieses Element erhält den angegebenen Pfad aus seinem xlink:href-Attribut Und richten Sie den Text an diesem Pfad aus, siehe Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:

Dieser Text folgt einer Kurve.

Bilder in SVG rendern - Bildelement
SVG Das Bildelement in kann die Anzeige von Rasterbildern direkt unterstützen und ist sehr einfach zu verwenden. Schauen Sie sich das Beispiel unten an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Ein paar Punkte, die Sie hier beachten sollten:
1. Wenn die x- oder y-Koordinate nicht festgelegt ist, wird die Der Standardwert ist 0.

2. Wenn Breite oder Höhe nicht festgelegt sind, ist der Standardwert ebenfalls 0.

3. Wenn die Breite oder Höhe explizit auf 0 gesetzt ist, wird das Rendern dieses Bildes verhindert.

4. Das Bildformat unterstützt PNG, JPEG, JPG, SVG usw., also unterstützt SVG verschachteltes SVG.

5.image ist wie andere Elemente ein reguläres Element von SVG und unterstützt daher alle Zuschneide-, Maskierungs-, Filter-, Rotations- und anderen Effekte.

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/
Offizielle Dokumentation: http://www.w3.org/TR/SVG11/