Rad s tekstom u Scalable Vector Graphics (SVG)
U prethodnim postovima koristili smo SVG za izradu oblika. U ovom postu, kao što je naslov rekao, razmotrit ćemo stvaranje teksta s SVG-om. Postoji mnogo stvari koje možemo učiniti s tekstom izvan onoga što običan HTML tekst može učiniti.
Dakle, provjerimo ih.
Osnovna implementacija
Ali prije nego nastavimo dalje, da vidimo kako Tekst u SVG-u se formira na svojoj osnovnoj razini:
Tekst u SVG-u, kao što možete vidjeti iz gornjeg isječka koda, definiran je s dovoljno logičnom oznakom, x i y atribute za određivanje osnovnih koordinata.
Izvor slike: Wikipedia.org
Evo kako će izgledati tekst. Za sada se čini da nema razlike s običnim tekstom u HTML-u.
Osnovni stilovi teksta
Tekst se također može stilizirati s CSS svojstvima kao što je font-weight, font-style, i text-decoration koje se mogu provesti ili putem Inline-style, interni stil ili Vanjski stil o čemu smo raspravljali u prethodnom postu Stiliziranje SVG-a pomoću CSS-a. Evo nekih primjera.
odvažan
Ovo je tekst u Scalable Vector Graphic (SVG)
kurzivan
Ovo je kurzivni tekst u Scalable Vector Graphic (SVG)
Naglasiti
Ovo je podcrtani tekst u Scalable Vector Graphic (SVG)
Element
U nekim slučajevima, kada želimo primijeniti samo stilove ili atribute na određeni dio teksta, možemo ga koristiti
Ovo je hrabro ,ovo je kurziv iovo je podcrtano
Način pisanja
Tekst nije samo napisan s lijeva nadesno. U drugim dijelovima svijeta, primjerice u Japanu, tekst je napisan od vrha do dna. U SVG-u, to se može učiniti pomoću pisanje-način atribut.
ぁ ぃ ぅ ぇ ぉ か き
U gornjem primjeru stavili smo nekoliko slučajnih japanskih znakova (nemojte me pitati njihovo značenje, stvarno nemam pojma) i promijenite orijentaciju ovom deklaracijom stila, način pisanja: tb, gdje Tablica stoji za od vrha do dna.
Tekstualni pregled
Tekst u SVG-u u osnovi je grafički, tako da možemo primijeniti udar atribut za dodavanje granične crte tekstu kao što smo to učinili s drugim oblicima.
U gornjem isječku koda dodali smo udar atribut ispuniti atribut nijedan što će rezultirati sljedećom prezentacijom teksta.
Putanja teksta
U SVG-u, tekst ne samo da može biti prikazan vodoravno i okomito, već može slijedite obrazac Putanja. Evo kako to učiniti.
Prvo, moramo definirati Put. Međutim, stvaranje Puta izravno u HTML-u nije toliko intuitivno, moramo razumjeti koordinate i neke naredbe za koje sam siguran da će većina nas pokušati izbjeći. Dakle, da bi ovaj korak bio jednostavniji, osobno predlažem da otvorite vektorski uređivač (Inkscape ili Illustrator), stvorite putanju i generirate SVG kôd.
Zatim, stavite defs ovdje znači definiciju.
Primijetite da smo dodali i iskaznica atribut iskaznica u naš tekst s
Lorem ipsum dolor sit amet consectetur.
Daljnje čitanje: SVG putovi
Gradijent teksta
Dodavanje pozadine za ispunjavanje teksta također je moguće u SVG-u, a ako ste uspjeli u odjeljku Tekstovni put gore, to bi bilo mnogo lakše.
Prvo, moramo definirati boje gradijenta.
Kada su sve potrebne definicije postavljene, sada samo trebamo dodati tekst i uputiti ga ispuniti atribut gradijenta iskaznica atribut, kako slijedi;
Gradijent
I ovdje je tekst s nagibom.
Daljnje čitanje: SVG gradijent i uzorak
Daljnje reference
Tekst u SVG-u je nesumnjivo moćan, postoje mnoge stvari koje možemo učiniti više od onoga što možemo prilagoditi ovom postu. Dakle, u nastavku smo sastavili još nekoliko referenci koje služe vašem interesu za ovu temu.
- O fontovima u SVG - Divya Manian
- SVG Tekst Službena dokumentacija - W3.org
- SVG dokumentacija u Mozilla Dev. Mreža s primjerima i alatima - MDN
- SVG značajka pisanja - MDN
- Prikaži demo
- Preuzimanje izvora
