Szöveg használata méretezhető vektoros grafikában (SVG)
Korábbi üzeneteinkben SVG-t használtunk az alakzatok létrehozásához. Ebben a bejegyzésben, amint azt a cím is mondta, megvizsgáljuk Szöveg létrehozása SVG-vel. Van egy csomó dolog, amellyel szöveget tehetünk, ami meghaladja azt, amit a HTML-szöveg képes végrehajtani.
Tehát nézzük meg őket.
Alapvető megvalósítás
De mielőtt tovább megyünk, nézzük meg, hogyan Szöveg SVG-ben az alapszintjén van kialakítva:
Az SVG-ben levő szöveg, ahogy a fenti kódrészletből látható, megfelelően logikus címkével van meghatározva, x és y attribútumok az alapvonal koordinátáinak meghatározásához.
Képforrás: Wikipedia.org
És itt néz ki a szöveg. Mostanra úgy tűnik, hogy nincs különbség a HTML rendszeres szövegével.
Alapvető szövegstílusok
A szöveg CSS tulajdonságokkal is kialakítható, például: font-weight, betű stílus, és text-dekoráció amely megvalósítható akár inline-stílusú, belső stílus vagy Külső-style mint az előző hozzászólásban SVG formázása CSS-sel. Íme néhány példa.
Bátor
Ez a méretezhető vektorgrafikus (SVG) szöveg.
dőlt betű
Ez a dőlt szöveg a skálázható vektorgrafikus (SVG)
Aláhúzás
Ez aláhúzott szöveg a méretezhető vektoros grafikában (SVG)
Elem
Bizonyos esetekben, ha csak a Szöveg bizonyos részeinek stílusait vagy attribútumait szeretnénk alkalmazni, használhatjuk
Ez merész ,ez dőlt ésez aláhúzza
Írási mód
A szöveget nem csak írják balról jobbra. A világ más részein, például Japánban, a szöveget írják fentről lefelé. Az SVG-ben ez a írás-mód tulajdonság.
ぁ ぃ ぅ ぇ ぉ か き
A fenti példában több véletlenszerű japán karaktert is elhelyeztünk (ne kérdezd meg a jelentésüket, tényleg fogalmam sincs), és változtassam meg ezt a stílus-nyilatkozatot, írási mód: tb, hol tuberkulózis áll fentről lefelé.
Szöveg vázlat
Az SVG-ben lévő szöveg alapvetően grafikus, így alkalmazhatjuk a ütés attribútum, hogy határvonalat adjon a Szöveghez, mint ahogyan a többi alakhoz is.
A fenti kódrészletben hozzáadtuk a ütés attribútum a tölt tulajdonít neki egyik sem amely a következő szöveges prezentációt eredményezi.
Szövegút
Az SVG-ben a Szöveg nem csak vízszintesen és függőlegesen jeleníthető meg, hanem azt is kövesse az Útvonal mintát. Itt van, hogyan kell csinálni.
Először meg kell határoznunk az út. Azonban az útvonal létrehozása közvetlenül a HTML-ben nem olyan intuitív, hogy meg kell értenünk a koordinátákat és néhány parancsot, amelyekről biztos vagyok benne, hogy a legtöbbünk megpróbál elkerülni. Tehát, hogy ezt a lépést egyszerűbbé tegyük, személy szerint azt javaslom, hogy nyisson meg egy vektorszerkesztőt (Inkscape vagy Illustrator), hozzon létre egy utat, és hozzon létre az SVG kódot.
Akkor tedd a defs itt a definíció.
Figyeljük meg, hogy hozzáadtunk egy id attribútum a id szövegünkhöz
Lorem ipsum dolor sit amet consectetur.
További irodalom: SVG útvonalak
Szöveg gradiens
Az SVG-ben a háttér kitöltése a szöveg kitöltéséhez is lehetséges, és ha sikerült a fenti szövegpálya részben, ez sokkal könnyebb lenne.
Először meg kell határoznunk a színátmenet színét.
Amikor az összes szükséges definíciót felállították, most már csak hozzá kell adnunk a szöveget, és utalniuk kell a tölt attribútum a gradienshez id attribútum;
Gradiens
És itt van, a szöveg színátmenet.
További irodalom: SVG gradiens és minta
További hivatkozások
Az SVG-ben lévő szöveg kétségtelenül erőteljes, valójában sok mindent megtehetünk, amit ezen a poszton elhelyezhetünk. Tehát az alábbiakban néhány további referenciát állítottunk össze az érdeklődés iránt érdeklődésre.
- A betűtípusokról az SVG-ben - Divya Manian
- SVG szöveg hivatalos dokumentáció - W3.org
- SVG Dovumentation a Mozilla Dev-en. Hálózatok példákkal és eszközökkel - MDN
- SVG írási mód attribútum - MDN
- Demó megtekintése
- Letöltés forrása
