Работа с текст в векторни графики с мащабируемост (SVG)
В предишните ни публикации използвахме SVG за създаване на фигури. В този пост, както се казва в заглавието, ще разгледаме създаване на текст с SVG. Има много неща, които можем да направим с текст извън това, което обикновен HTML текст може да направи.
Така че нека ги проверим.
Основно изпълнение
Но преди да отидем по-далеч, нека да видим как Текст в SVG се формира на основното си ниво:
Текстът в SVG, както можете да видите от горния кодов фрагмент, се дефинира с достатъчно логически маркер, х и ш атрибути за задаване на координатите на базовите линии.
Източник на изображение: Wikipedia.org
Ето как ще изглежда текстът. За сега изглежда, че няма разлика с обикновения текст в HTML.
Основни текстови стилове
Текстът може също да бъде оформен с CSS свойства като шрифт тегло, шрифта стил, и текст-украса които могат да бъдат приложени или чрез вътрешен стил или външен стил както сме обсъждали в предишната публикация Оформяне на SVG с CSS. Ето някои от примерите.
смел
Това е текст в Scalable Vector Graphic (SVG)
италийски
Това е курсив в Scalable Vector Graphic (SVG)
подчертавам
Това е подчертан текст в Scalable Vector Graphic (SVG)
елемент
В някои случаи, когато искаме само да приложим стилове или атрибути към определена част от текста, можем да използваме
Това е смело ,това е курсив итова е подчертано
Режим на писане
Текстът не се записва само от Отляво надясно. В други части на света, например в Япония, текстът е написан отгоре-надолу. В SVG това може да стане с помощта на писането режим атрибут.
ぁ ぃ ぅ ぇ ぉ か き
В примера по-горе сме сложили няколко случайни японски символа (не ме питайте какво означават, наистина нямам представа) и променете ориентацията с тази декларация за стил, режим на писане: tb, където туберкулоза е стойка отгоре-надолу.
Контур на текста
Текстът в SVG е основно графичен, така че можем да приложим и удар атрибут, за да добавите граница към Текст точно както направихме с другите форми.
В горния кодов фрагмент добавихме удар атрибут към запълни атрибут към нито един това ще доведе до следното представяне на текста.
Текстов път
В SVG текстът не само може да се показва хоризонтално и вертикално, но може също така следвайте пътеката. Ето как да го направите.
Първо, трябва да дефинираме пътя. Въпреки това, създаването на Path директно в HTML не е толкова интуитивно, ние трябва да разбираме координатите и някои команди, които съм сигурна, че повечето от нас ще се опитат да избегнат. Така че, за да направим тази стъпка по-проста, аз лично предлагам да отворите векторния редактор (Inkscape или Illustrator), да създадете път и да генерирате SVG кода.
След това сложете DEFS тук означава дефиниция.
Забележете, че сме добавили също документ за самоличност атрибут към документ за самоличност към нашия текст с
Lorem ipsum dolor sit amet consectetur.
Допълнителна информация: Пътища SVG
Текст с градиент
Добавянето на фон, за да запълни текста, също е възможно в SVG и ако сте успели в секцията Text Path по-горе, това ще бъде много по-лесно..
Първо, трябва да определим градиентните цветове.
Когато всички необходими дефиниции са настроени, сега трябва само да добавим текста и да посочим запълни атрибут на градиента документ за самоличност атрибут, както следва;
градиент
И тук е текстът с градиент.
Допълнителна информация: SVG Gradient и Pattern
Допълнителни справки
Текстът в SVG несъмнено е мощен, всъщност има много неща, които можем да направим извън това, което можем да направим в този пост. Така, по-долу сме събрали още няколко препратки, които да служат на вашия интерес към тази тема.
- За шрифтовете в SVG - Divya Manian
- SVG Текст Официална документация - W3.org
- SVG Dovumentation в Mozilla Dev. Мрежа с примери и инструменти - MDN
- Атрибут на SVG режим на писане - MDN
- Преглед на демо
- Изтеглете Източник
