Práca s textom v škálovateľnej vektorovej grafike (SVG)
V predchádzajúcich príspevkoch sme pomocou SVG vytvorili tvary. V tomto príspevku, ako to povedal názov, sa budeme zaoberať vytváranie textu so SVG. Existuje veľa vecí, ktoré môžeme urobiť s textom, nad rámec toho, čo je jednoduchý text HTML schopný robiť.
Pozrime sa na to.
Základná implementácia
Ale predtým, ako ideme ďalej, pozrime sa ako Text v SVG je vytvorená vo svojej veľmi základnej úrovni:
Text v SVG, ako je vidieť z horeuvedeného útržku kódu, je definovaný dostatočne logickou značkou, X a y atribúty na určenie súradníc základnej čiary.
Zdroj obrázku: Wikipedia.org
A tu bude ako text bude vyzerať. Zatiaľ sa zdá, že nemá žiadny rozdiel s bežným textom v jazyku HTML.
Základné štýly textu
Text môže byť tiež štylizovaný pomocou vlastností CSS, ako napríklad font-weight, štýl písma, a text-decoration ktoré môžu byť implementované buď prostredníctvom inline-štýl, interný štýl alebo externé štýlu ako sme o tom diskutovali v predchádzajúcom príspevku Styling SVG s CSS. Tu sú niektoré príklady.
smelý
Toto je text vo formáte Scalable Vector Graphic (SVG)
kurzíva
Toto je kurzíva v programe Scalable Vector Graphic (SVG)
Zdôrazniť
Toto je podčiarknutý text v aplikácii Scalable Vector Graphic (SVG)
Element
V niektorých prípadoch, keď chceme použiť iba štýly alebo atribúty konkrétnej časti textu, môžeme ich použiť
Toto je tučné ,toto je kurzíva atoto je podčiarknuté
Režim zápisu
Text je nielen napísaný z zľava doprava. V iných častiach sveta, napríklad v Japonsku, je napísaný text top-k-dolnej. V SVG to možno urobiť pomocou písanie-mode atribút.
ぁ ぃ ぅ ぇ ぉ か き
Vo vyššie uvedenom príklade sme vložili niekoľko náhodných japonských znakov (nepýtaj sa mi ich význam, naozaj nemám žiadnu predstavu) a zmeniť orientáciu s týmto vyhlásením štýlu, režim písania: tb, kde tb je stáť top-k-dolnej.
Textový obrys
Text v SVG je v podstate grafický, takže môžeme tiež použiť mŕtvica atribút pridať hraničnú čiaru do textu rovnako ako ostatné tvary.
Vo vyššie uvedenom útržku kódu sme pridali mŕtvica atribút na vyplniť atribút pre nikto čo bude mať za následok nasledujúcu prezentáciu textu.
Textová cesta
V SVG text nie je možné zobrazovať iba horizontálne a vertikálne, ale môže tiež postupujte podľa vzoru trasy. Tu je postup, ako to urobiť.
Po prvé, musíme definovať cesta. Vytvorenie cesty priamo v HTML však nie je intuitívne, potrebujeme pochopiť súradnice a niektoré príkazy, ktoré som si istý, že sa väčšina z nás pokúsi vyhnúť. Preto, aby som tento krok zjednodušil, osobne navrhujem jednoducho otvoriť vektorový editor (Inkscape alebo Illustrator), vytvoriť cestu a generovať kód SVG.
Potom vložte defs tu znamená definíciu.
Všimnite si, že sme tiež pridali id atribút na id do nášho textu s
Lorem ipsum dolor sedí po sebe.
Ďalšie čítanie: Trasy SVG
Textový gradient
Pridávanie pozadia na vyplnenie textu je tiež možné v SVG a ak ste sa podarili v sekcii Textová cesta vyššie, bolo by to oveľa jednoduchšie.
Najskôr je potrebné definovať gradientné farby.
Keď sa nastavia všetky potrebné definície, stačí pridať text a odkázať vyplniť atribút gradientu id atribút takto:
stúpanie
A tu je to text s gradientom.
Ďalšie čítanie: Gradient a vzor SVG
Ďalšie odkazy
Text v SVG je nepochybne silný, v skutočnosti je veľa vecí, ktoré dokážeme robiť nad rámec toho, čo môžeme prijať v tomto príspevku. Takže nižšie sme dali dohromady niekoľko ďalších odkazov, ktoré slúžia vášmu záujmu o túto tému.
- O fontoch v SVG - Divya Manian
- SVG Textová oficiálna dokumentácia - W3.org
- SVG doručenie na Mozilla Dev. Sieť s príkladmi a nástrojmi - MDN
- Atribút režimu písania SVG - MDN
- Zobraziť demo
- Stiahnuť zdroj
