Arbeiten mit Text in skalierbaren Vektorgrafiken (SVG)

In unseren vorherigen Beiträgen haben wir SVG zum Erstellen von Formen verwendet. In diesem Beitrag werden wir, wie der Titel schon sagte, nachsehen Erstellen von Text mit SVG. Es gibt eine Menge Dinge, die wir mit Text tun können, die über den einfachen HTML-Text hinausgehen.

Also, lass uns nachsehen.

Grundlegende Implementierung

Aber bevor wir weiter gehen, wollen wir sehen, wie Text in SVG ist auf ihrem sehr grundlegenden Niveau gebildet:

Der Text in SVG wird, wie Sie dem obigen Code-Snippet entnehmen können, mit einem ausreichend logischen Tag definiert, . Dieses Element erfordert im Grunde nur x und y Attribute, um die Grundlinienkoordinaten anzugeben.

Bildquelle: Wikipedia.org

Und so sieht der Text aus. Im Moment scheint es keinen Unterschied zu normalem Text in HTML zu geben.

Grundlegende Textstile

Text kann auch mit CSS-Eigenschaften wie z Schriftgewicht, Schriftstil, und Textdekoration das kann entweder durch implementiert werden Inline-Stil, interner Stil oder äußerlicher Stil wie wir im vorherigen Post darüber diskutiert haben SVG mit CSS gestalten. Hier einige Beispiele.

Fett gedruckt

 Dies ist Text in einer skalierbaren Vektorgrafik (SVG). 

Kursiv

 Dies ist kursiver Text in skalierbaren Vektorgrafiken (SVG). 

Unterstreichen

 Dies ist unterstrichener Text in Scalable Vector Graphic (SVG). 

Element

In einigen Fällen, wenn wir nur Stile oder Attribute auf einen bestimmten Textabschnitt anwenden möchten, können wir dies verwenden . Dieses Beispiel zeigt, wie wir hinzufügen Fett gedruckt, kursiv und unterstreichen zu einer einzelnen Textzeile.

 Das ist mutig, das ist kursiv und das ist unterstrichen 

Schreibmodus

Text wird nicht nur aus geschrieben links nach rechts. In anderen Teilen der Welt, zum Beispiel in Japan, wird der Text aus geschrieben oben nach unten. In SVG kann dies mit der Schreibmodus Attribut.

 ぃ ぅ ぇ ぉ か き  

In dem obigen Beispiel haben wir mehrere zufällige japanische Zeichen eingegeben (fragen Sie mich nicht nach deren Bedeutung, ich habe wirklich keine Ahnung) und ändern die Ausrichtung mit dieser Style-Deklaration, Schreibmodus: tb, woher tb steht für oben nach unten.

Textumriss

Text in SVG ist im Grunde eine Grafik, so können wir auch das anwenden Schlaganfall Attribut, um eine Begrenzungslinie zum Text hinzuzufügen, genau wie bei den anderen Formen.

In dem obigen Code-Snippet haben wir das hinzugefügt Schlaganfall Attribut zum Element und entfernen Sie die Textfarbe durch Angabe von füllen zuschreiben keiner was zur folgenden Textdarstellung führt.

Textpfad

In SVG kann der Text nicht nur horizontal und vertikal angezeigt werden, sondern auch Folge einem Pfadmuster. Hier ist, wie es geht.

Zuerst müssen wir definieren der Weg. Das Erstellen eines Pfads direkt in HTML ist jedoch nicht so intuitiv. Wir müssen die Koordinaten und einige Befehle verstehen, die die meisten von uns wahrscheinlich vermeiden werden. Um diesen Schritt zu vereinfachen, empfehle ich persönlich, einfach einen Vektoreditor (Inkscape oder Illustrator) zu öffnen, einen Pfad zu erstellen und den SVG-Code zu generieren.

Dann setzen Sie die Element in einem Element. defs hier bedeutet definition.

Beachten Sie, dass wir auch eine hinzugefügt haben Ich würde Attribut zum . Jetzt müssen wir nur noch den Pfad verknüpfen Ich würde zu unserem Text mit Element wie so;

    Lorem ipsum dolor sitzt bei Consectetur.   

Lesen Sie weiter: SVG-Pfade

Textverlauf

Das Hinzufügen eines Hintergrunds zum Füllen des Textes ist auch in SVG möglich. Wenn Sie den Textpfad-Abschnitt oben erfolgreich erstellt haben, ist dies wesentlich einfacher.

Zuerst müssen wir die Farbverläufe definieren.

Wenn alle erforderlichen Definitionen festgelegt sind, müssen wir jetzt nur noch den Text hinzufügen und auf das verweisen füllen Attribut für die Steigung Ich würde Attribut wie folgt;

 Gradient 

Und hier ist der Text mit Farbverlauf.

Lesen Sie weiter: SVG-Verlauf und -Muster

Weitere Referenzen

Text in SVG ist zweifellos mächtig, es gibt tatsächlich viele Dinge, die wir über das hinaus können, was wir in diesem Beitrag aufnehmen können. Nachfolgend haben wir einige weitere Referenzen zusammengestellt, um Ihr Interesse an diesem Thema zu zeigen.

• Über Schriftarten in SVG - Divya Manian
• SVG Text Offizielle Dokumentation - W3.org
• SVG-Dokumentation bei Mozilla Dev. Netzwerk mit Beispielen und Tools - MDN
• SVG-Schreibmodusattribut - MDN

• Demo anzeigen
• Quelle herunterladen