Darbs ar tekstu mērogojamā vektorgrafikā (SVG)
Iepriekšējās ziņās mēs izmantojām SVG, lai izveidotu formas. Šajā postenī, kā teikts nosaukumā, mēs izskatīsim teksta izveide ar SVG. Ir daudzas lietas, ko mēs varam darīt ar tekstu, kas pārsniedz to, ko spēj vienkāršs HTML teksts.
Tātad, pārbaudīsim tos.
Pamata īstenošana
Bet, pirms mēs ejam tālāk, redzēsim, kā Teksts SVG ir izveidots tā pamatlīmenī:
SVG teksts, kā redzams no iepriekš minētā koda fragmenta, ir definēts ar pietiekami loģisku tagu, x un y atribūti, lai norādītu bāzes līnijas koordinātas.
Attēla avots: Wikipedia.org
Un šeit izskatās, kā teksts izskatīsies. Pašlaik šķiet, ka tas nav atšķirīgs ar regulāru tekstu HTML.
Galvenie teksta stili
Tekstu var veidot arī ar CSS īpašībām, piemēram, fontu svars, fonta stils, un teksta apdare ko var īstenot vai nu iekšējais stils, iekšējais stils vai ārējais stils kā mēs esam apsprieduši iepriekšējā ziņojumā SVG veidošana ar CSS. Šeit ir daži piemēri.
Treknrakstā
Tas ir teksts skalojamā vektorgrafikā (SVG)
Slīpraksts
Šis ir slīpraksta vektora grafiskā attēla (SVG) teksts
Pasvītrot
Tas ir pasvītrots teksts Scalable Vector Graphic (SVG)
Elements
Dažos gadījumos, kad mēs tikai vēlamies piemērot stilus vai atribūtus konkrētai teksta daļai, mēs varam izmantot
Tas ir treknrakstā ,tas ir slīpraksts untas ir uzsvērts
Rakstīšanas režīms
Teksts ir rakstīts ne tikai no no kreisās uz labo. Citās pasaules daļās, piemēram, Japānā, teksts ir rakstīts no no augšas uz leju. SVG to var izdarīt, izmantojot rakstīšanas režīms atribūts.
ぁ ぃ ぅ ぇ ぉ か き
Iepriekš minētajā piemērā mēs esam ievietojuši vairākas izlases japāņu rakstzīmes (neprasiet man to nozīmi, man tiešām nav ne jausmas), gan mainīt stilu ar šo stila deklarāciju, rakstīšanas režīms: tb, kur tb ir kandidāts no augšas uz leju.
Teksta izklāsts
SVG teksts galvenokārt ir grafisks, tāpēc mēs varam arī piemērot insults atribūts, lai pievienotu Robežu līniju tekstam tāpat kā mēs ar citām figūrām.
Iepriekš minētajā koda fragmentā mēs esam pievienojuši insults atribūtu aizpildiet atribūts neviens nav kas radīs šādu teksta noformējumu.
Teksta ceļš
SVG tekstā teksts ir redzams ne tikai horizontāli un vertikāli, bet arī sekojiet ceļa modelim. Lūk, kā to izdarīt.
Pirmkārt, mums ir jādefinē ceļš. Tomēr ceļojuma izveide tieši HTML nav tik intuitīva, ka mums ir jāsaprot koordinātas un dažas komandas, kuras esmu pārliecināts, ka lielākā daļa no mums mēģinās izvairīties. Tāpēc, lai vienkāršotu šo soli, es personīgi iesaku atvērt vektoru redaktoru (Inkscape vai Illustrator), izveidot ceļu un ģenerēt SVG kodu.
Tad ielieciet defekti šeit ir definīcija.
Ņemiet vērā, ka esam pievienojuši arī ID atribūtu ID mūsu tekstu ar
Lorem ipsum dolor sit amet consectetur.
Papildu lasījums: SVG ceļi
Teksts Gradients
SVG var pievienot arī fona pievienošanu, lai aizpildītu tekstu, un, ja jums ir izdevies iepriekš tekstā "Teksta ceļš", tas būtu daudz vieglāk.
Pirmkārt, mums ir jādefinē gradienta krāsas.
Kad visas nepieciešamās definīcijas ir izveidotas, tagad mums tikai jāpievieno teksts un jānorāda aizpildiet atribūts gradientam ID atribūts;
Gradients
Un šeit tas ir, teksts ar gradientu.
Papildu lasījums: SVG gradients un modelis
Citas atsauces
SVG teksts ir neapšaubāmi spēcīgs, ir daudzas lietas, ko mēs varam darīt tālāk par to, ko mēs varam uzņemt šajā amatā. Tātad, zemāk mēs esam apkopojuši vēl dažas atsauces, lai kalpotu jūsu interesēm šajā jautājumā.
- Par fontiem SVG - Divya Manian
- SVG teksta oficiālā dokumentācija - W3.org
- SVG dokumentācija Mozilla Dev. Tīkls ar piemēriem un rīkiem - MDN
- SVG rakstīšanas režīma atribūts - MDN
- Skatīt demonstrāciju
- Lejupielādēt avotu
