Рад са текстом у Сцалабле Вецтор Грапхицс (СВГ)

У претходним постовима користили смо СВГ за креирање облика. У овом посту, као што је речено у наслову, размотрићемо креирање текста са СВГ-ом. Постоји много ствари које можемо да урадимо са текстом изван онога што обичан ХТМЛ текст може да уради.

Па, хајде да их проверимо.

Басиц Имплементатион

Али, пре него што кренемо даље, да видимо како Текст у СВГ-у се формира на свом основном нивоу:

Текст у СВГ-у, као што се може видети из горњег исечка кода, дефинисан је са довољно логичном ознаком, . Овај елемент у суштини захтева само Икс и и атрибуте за одређивање основних координата.

Извор слике: Википедиа.орг

Ево како ће изгледати текст. За сада изгледа да нема никакве разлике са регуларним текстом у ХТМЛ-у.

Основни стилови текста

Текст се такође може стилизовати са ЦСС својствима као што је фонт-веигхт, тип слова, и тект-децоратион које се могу провести или кроз Инлине-стиле, интерни стил или екстерни стил као што смо расправљали у претходном посту Стилинг СВГ витх ЦСС. Ево неких примера.

Одважан

 Ово је текст у Сцалабле Вецтор Грапхиц (СВГ) 

Италиц

 Ово је курзивни текст у Сцалабле Вецтор Грапхиц (СВГ) 

Подвући

 Ово је подцртани текст у Сцалабле Вецтор Грапхиц (СВГ) 

Елемент

У неким случајевима, када желимо само примијенити стилове или атрибуте на одређени дио текста, можемо га користити . Овај пример испод показује како додајемо одважан, италиц и подвући на једну линију текста.

 Ово је смело, ово је курзив и ово је подвучено 

Режим писања

Текст није само писан с лева надесно. У другим дијеловима свијета, примјерице у Јапану, текст је написан од врха до дна. У СВГ-у, то се може урадити помоћу мод писања аттрибуте.

 ぃ ぅ ぇ ぉ き き  

У горњем примјеру, ставили смо неколико случајних јапанских знакова (не питајте ме о њиховом значењу, стварно немам појма) и промијените оријентацију овом декларацијом стила, мод писања: тб, где тб ис станд фор од врха до дна.

Тект Оутлине

Текст у СВГ-у је у основи графички, тако да можемо да применимо удар атрибут да бисте додали граничну линију Тексту као што смо то учинили са другим облицима.

У горњем исјечку кода додали смо удар атрибут и уклоните боју текста навођењем филл приписати ниједан што ће резултирати сљедећом презентацијом текста.

Тект Патх

У СВГ-у, текст не само да може бити приказан хоризонтално и вертикално, већ може следите шему пута. Ево како то урадити.

Прво, морамо дефинисати путања. Међутим, креирање Путање директно у ХТМЛ-у није толико интуитивно, морамо да разумемо координате и неке команде за које сам сигуран да ће већина нас покушати да их избегне. Дакле, да би овај корак био једноставнији, ја лично предлажем да само отворите векторски едитор (Инксцапе или Иллустратор), креирате путању и генеришете СВГ код.

Онда, стави елемент унутар а елемент. дефс овде значи дефиниција.

Обратите пажњу да смо додали и ид атрибут . Сада, само требамо повезати Пут ид са нашим текстом елемент;

    Лорем ипсум долор сит амет цонсецтетур.   

Додатна литература: СВГ Патхс

Тект Градиент

Додавање позадине за попуњавање текста је такође могуће у СВГ-у, а ако сте успели у одељку Текстуални пут горе, то би било много лакше..

Прво, морамо дефинисати боје градијента.

Када су све потребне дефиниције постављене, сада само требамо додати текст и упутити га филл атрибут градијента ид атрибут, као што следи;

 Градиент 

И ево га, текст са градијентом.

Додатна литература: СВГ градијент и узорак

Даље референце

Текст у СВГ-у је несумњиво моћан, постоји много ствари које можемо да урадимо изван онога што можемо да прилагодимо овом посту. Дакле, испод смо саставили још неколико референци које служе вашем интересовању за ову тему.

• О фонтовима у СВГ - Дивиа Маниан
• СВГ Тект Оффициал Доцументатион - В3.орг
• СВГ Довументатион на Мозилла Дев. Мрежа са примерима и алаткама - МДН
• СВГ мод за писање - МДН

• Виев Демо
• Довнлоад Соурце