Arbejde med tekst i skalerbar vektorgrafik (SVG)

I vores tidligere indlæg har vi brugt SVG til at skabe former. I dette indlæg, som titlen sagde, vil vi se nærmere på oprettelse af tekst med SVG. Der er mange ting, vi kan gøre med tekst ud over, hvad almindelig HTML-tekst er i stand til at gøre.

Så lad os tjekke dem ud.

Grundlæggende implementering

Men inden vi går videre, lad os se hvordan Tekst i SVG er dannet på sit meget grundlæggende niveau:

Teksten i SVG, som du kan se fra ovenstående kodestykke, er defineret med et tilstrækkeligt logisk tag, . Dette element kræver kun grundlæggende x og y attributter til at angive basislinjekoordinaterne.

Billedkilde: Wikipedia.org

Og her er hvordan teksten vil se ud. For nu ser det ud til, at det ikke har nogen forskel med almindelig tekst i HTML.

Grundlæggende tekstformater

Tekst kan også styles med CSS egenskaber som f.eks font-weight, skrifttype, og tekst-dekoration som kan implementeres enten gennem inline-stil, intern stil eller ekstern-stil som vi har diskuteret i det foregående indlæg om Styling SVG med CSS. Her er nogle af eksemplerne.

Dristig

 Dette er tekst i Scalable Vector Graphic (SVG)

Kursiv

 Dette er kursiv tekst i Scalable Vector Graphic (SVG)

Understrege

 Dette er understreget tekst i Scalable Vector Graphic (SVG)

Element

I nogle tilfælde, når vi kun ønsker at anvende stilarter eller attributter til en bestemt del af teksten, kan vi bruge . Dette eksempel nedenfor viser, hvordan vi tilføjer dristig, kursiv og understrege til en enkelt tekstlinje.

 Dette er fed, dette er kursiv og dette understreges

Skrivefunktion

Tekst er ikke kun skrevet fra venstre til højre. I andre dele af verden, f.eks. Japan, er teksten skrevet fra top til tå. I SVG kan dette gøres ved at bruge skrivning-tilstand attribut.

 ぁ ぃ ぅ ぇ ぉ か き

I eksemplet ovenfor har vi lagt flere tilfældige japanske tegn (spørg mig ikke deres mening, jeg har virkelig ingen ide) og ændre orienteringen med denne stilerklæring, skrive-mode: tb, hvor tb står for top til tå.

Tekstoversigt

Tekst i SVG er stort set en grafik, så vi kan også anvende slag attribut til at tilføje en grænselinje til teksten ligesom vi gjorde med de andre former.

I ovenstående kodestykke har vi tilføjet slag attribut til element og fjern tekstfarven ved at angive fylde attribut til ingen hvilket vil resultere i følgende tekstpræsentation.

Tekstvej

I SVG kan teksten ikke kun vises vandret og lodret, men det kan også følg et banemønster. Sådan gør du det her.

Først skal vi definere stien. Men at skabe en sti direkte i HTML er ikke så intuitiv, vi skal forstå koordinater og nogle kommandoer, som jeg er sikker på, de fleste af os vil forsøge at undgå. Så for at gøre dette trin enklere foreslår jeg personligt at bare åbne en vektorredigerer (Inkscape eller Illustrator), oprette en sti og generere SVG-koden.

Sæt derefter element inde i a element. defs her betyder definition.

Bemærk, at vi også har tilføjet en id attribut til . Nu behøver vi kun at forbinde stien id til vores tekst med element som sådan;

    Der er gratis adgang til værelset.

Yderligere læsning: SVG-stier

Tekstgradient

Tilføjelse af en baggrund for at udfylde teksten er også mulig i SVG, og hvis du har lykkes i afsnittet Tekstvej ovenfor, ville det være meget lettere.

Først skal vi definere gradientfarverne.

Når alle de nødvendige definitioner er oprettet, skal vi kun tilføje teksten og henvise til fylde attribut til gradientens id attribut som følger

 gradient

Og her er det, teksten med gradient.

Yderligere læsning: SVG Gradient og Mønster

Yderligere referencer

Tekst i SVG er utvivlsomt stærk, der er faktisk mange ting, vi kan gøre ud over, hvad vi kan imødekomme i dette indlæg. Så nedenfor har vi samlet nogle få referencer til at tjene din interesse for dette emne.

Om skrifttyper i SVG - Divya Manian
SVG-tekst Officiel dokumentation - W3.org
SVG Dovumentation hos Mozilla Dev. Netværk med eksempler og værktøjer - MDN
SVG Skrivefunktions Egenskab - MDN

Se Demo
Download kilde