Arbeide med tekst i skalerbar vektorgrafik (SVG)

I våre tidligere innlegg har vi brukt SVG til å lage former. I dette innlegget, som tittelen sa, vil vi se nærmere på skaper tekst med SVG. Det er mange ting vi kan gjøre med tekst utover hva vanlig HTML-tekst er i stand til å gjøre.

Så, la oss sjekke dem ut.

Grunnleggende implementering

Men før vi går videre, la oss se hvordan Tekst i SVG er dannet på sitt grunnleggende nivå:

Teksten i SVG, som du ser fra koden ovenfor, er definert med en tilstrekkelig logisk kode, . Dette elementet krever i utgangspunktet bare x og y attributter for å angi basislinjekoordinatene.

Bildekilde: Wikipedia.org

Og her er hvordan teksten vil se ut. For nå ser det ut til at det ikke har noen forskjell med vanlig tekst i HTML.

Grunnleggende tekststiler

Tekst kan også utformes med CSS egenskaper som font-vekt, fontstil, og text-decoration som kan implementeres enten gjennom inline-stil, intern stil eller external-stil som vi har diskutert i forrige innlegg om Styling SVG med CSS. Her er noen av eksemplene.

Modig

 Dette er tekst i Scalable Vector Graphic (SVG)

kursiv

 Dette er kursiv tekst i Scalable Vector Graphic (SVG)

Understrek

 Dette er understreket tekst i Scalable Vector Graphic (SVG)

Element

I noen tilfeller, når vi bare ønsker å bruke stiler eller attributter til bestemt del av teksten, kan vi bruke . Dette eksempelet nedenfor viser hvordan vi legger til modig, kursiv og understreke til en enkelt linje med tekst.

 Dette er fet, Dette er kursiv og dette er understreket

Skriftsmodus

Tekst er ikke bare skrevet fra venstre til høyre. I andre deler av verden, for eksempel Japan, er teksten skrevet fra topp til bunn. I SVG kan dette gjøres ved å bruke skrive-modus Egenskap.

 ぁ ぃ ぅ ぇ ぉ か き

I eksemplet ovenfor har vi satt flere tilfeldige japanske tegn (ikke spør meg hva de betyr, jeg har ingen anelse) og endre orienteringen med denne stildeklarasjonen, skrivemodus: tb, hvor tb står for topp til bunn.

Tekstoversikt

Tekst i SVG er i utgangspunktet en grafikk, så vi kan også bruke hjerneslag Tilordne å legge til en kantlinje til teksten, akkurat som vi gjorde med de andre figurene.

I koden ovenfor har vi lagt til hjerneslag attributt til element og fjern tekstfargen ved å spesifisere fylle tilskrive ingen som vil resultere i følgende tekstpresentasjon.

Tekstvei

I SVG kan teksten ikke bare vises horisontalt og vertikalt, men det kan også følg et banemønster. Slik gjør du det.

Først må vi definere banen. Men å lage en sti direkte i HTML er ikke så intuitiv, vi trenger å forstå koordinater og noen kommandoer som jeg er sikker på at de fleste av oss vil forsøke å unngå. Så, for å gjøre dette trinnet enklere, foreslår jeg personlig å bare åpne en vektorredigerer (Inkscape eller Illustrator), lage en bane og generere SVG-koden.

Deretter legger du element inne i a element. defs her betyr definisjon.

Legg merke til at vi også har lagt til en id attributt til . Nå trenger vi bare å koble veien id til vår tekst med element, slik som

    Dette er et sted å besøke.

Videre lesning: SVG-stier

Tekstgradient

Hvis du legger til en bakgrunn for å fylle teksten, er det også mulig i SVG, og hvis du har lyktes i seksjonen Tekstvei ovenfor, ville dette være mye lettere.

Først må vi definere gradientfarger.

Når alle nødvendige definisjoner er satt opp, trenger vi bare å legge til teksten og referere til fylle Tilskrive til gradientens id attributt, som følger;

 gradient

Og her er det, teksten med gradient.

Videre lesning: SVG-grad og mønster

Ytterligere referanser

Tekst i SVG er utvilsomt kraftig, det er faktisk mange ting vi kan gjøre utover det vi kan imøtekomme i dette innlegget. Så, under har vi satt sammen noen få referanser for å tjene din interesse for dette emnet.

Om skrifttyper i SVG - Divya Manian
SVG-tekst Offisiell dokumentasjon - W3.org
SVG Dovumentation på Mozilla Dev. Nettverk med eksempler og verktøy - MDN
SVG skrivemodus Egenskap - MDN

Se demo
Last ned kilde