Delo z besedilom v Scalable Vector Graphics (SVG)
V prejšnjih objavah smo uporabili SVG za ustvarjanje oblik. V tem postu bomo, kot pravi naslov, preučili ustvarjanje besedila s SVG. Obstaja veliko stvari, ki jih lahko naredimo z besedilom, ki presega tisto tekstovno besedilo, ki je sposobno narediti.
Torej jih preglejmo.
Osnovno izvajanje
Ampak, preden gremo še dlje, poglejmo, kako Besedilo v SVG se oblikuje na zelo osnovni ravni:
Besedilo v SVG-ju, kot lahko vidite iz zgornjega odseka kode, je definirano z dovolj logično oznako, x in y atribute za določitev osnovnih koordinat.
Vir slike: Wikipedia.org
In tukaj je, kako bo besedilo izgledalo. Za zdaj se zdi, da nima nobene razlike z običajnim besedilom v HTML-ju.
Osnovni slogi besedila
Besedilo je lahko tudi oblikovano s CSS lastnostmi, kot je font-weight, slog pisave, in dekoracija besedila ki jih je mogoče izvesti bodisi skozi Inline-style, inter-style ali zunanji slog kot smo o tem razpravljali v prejšnji objavi Styling SVG s CSS. Tu je nekaj primerov.
Krepko
To je besedilo v Scalable Vector Graphic (SVG)
Ležeče
To je ležeče besedilo v Scalable Vector Graphic (SVG)
Podčrtaj
To je podčrtano besedilo v Scalable Vector Graphic (SVG)
Element
V nekaterih primerih, ko želimo uporabiti le sloge ali atribute za določen del besedila, ga lahko uporabimo
To je drzno ,to je ležeče into je poudarjeno
Način pisanja
Besedilo ni samo zapisano od leve proti desni. V drugih delih sveta, na primer na Japonskem, je besedilo napisano od zgoraj navzdol. V SVG to lahko storite z uporabo način pisanja atribut.
ぃ ぅ ぇ ぉ か き
V zgornjem primeru smo postavili več naključnih japonskih znakov (ne sprašujte me o njihovem pomenu, res nimam pojma) in s to slogovno deklaracijo spremenite usmeritev, način pisanja: tb, kje tb je stand for od zgoraj navzdol.
Besedilni oris
Besedilo v SVG je v osnovi grafika, tako da lahko uporabimo tudi kap atribut doda mejno črto besedilu tako, kot smo naredili z drugimi oblikami.
V zgornjem odseku kode smo dodali oznako kap atribut fill atribut nobena rezultat bo naslednja predstavitev besedila.
Pot besedila
V SVG-ju besedilo ni mogoče prikazati le vodoravno in navpično, ampak lahko tudi sledite vzorcu poti. Tukaj je, kako to storiti.
Najprej moramo opredeliti Pot. Vendar pa ustvarjanje poti neposredno v HTML-ju ni tako intuitivno, razumeti moramo koordinate in nekatere ukaze, za katere sem prepričan, da se jih bo večina izmed nas poskušala izogniti. Da bi bil ta korak enostavnejši, osebno predlagam, da odprete vektorski urejevalnik (Inkscape ali Illustrator), ustvarite pot in ustvarite kodo SVG..
Potem, daj defs tukaj pomeni opredelitev.
Opazimo, da smo dodali tudi id atribut id z našim besedilom
Lorem ipsum dolor sit amet consectetur.
Nadaljnje branje: SVG poti
Gradient besedila
Dodajanje ozadja za zapolnitev besedila je prav tako možno v SVG-ju, in če ste uspeli v zgornjem razdelku Besedilo poti, bi bilo to veliko lažje..
Najprej moramo določiti gradientne barve.
Ko nastavite vse potrebne definicije, moramo zdaj dodati samo besedilo in se nanašati na fill atribut gradienta id atribut, kot sledi;
Gradient
In tukaj je besedilo z gradientom.
Nadaljnje branje: SVG gradient in vzorec
Dodatne reference
Besedilo v SVG-ju je nedvomno močno, dejansko je veliko stvari, ki jih lahko naredimo onkraj tega, kar lahko prilagodimo temu postu. Torej, spodaj smo sestavili še nekaj referenc, ki bodo služile vašemu zanimanju za to temo.
- O pisavah v SVG - Divya Manian
- SVG Text Uradna dokumentacija - W3.org
- SVG Dovumentacija v Mozilli Dev. Omrežje s primeri in orodji - MDN
- Atribut načina pisanja SVG - MDN
- Prikaži predstavitev
- Prenesi vir
