Робота з текстом у масштабованій векторній графіці (SVG)
У попередніх посадах ми використовували SVG для створення фігур. У цій посаді, як сказано в назві, ми розглянемо створення тексту з SVG. Є багато речей, які ми можемо зробити з текстом за межами того, що може зробити звичайний текст HTML.
Отже, давайте перевіримо їх.
Базова реалізація
Але, перш ніж піти далі, подивимося, як Текст у SVG формується на самому базовому рівні:
Текст у SVG, як видно з наведеного вище фрагмента коду, визначається досить логічним тегом, x і y атрибути для визначення координат базової лінії.
Джерело зображення: Wikipedia.org
І ось як буде виглядати текст. На даний момент, здається, він не відрізняється від звичайного тексту в HTML.
Основні стилі тексту
Текст також може бути оформлений за допомогою властивостей CSS, таких як font-weight, стиль шрифту, і текст-прикраса які можуть бути реалізовані або через внутрішній стиль, внутрішній стиль або зовнішній стиль як ми обговорювали в попередньому повідомленні Стилізація SVG за допомогою CSS. Ось деякі з прикладів.
Жирний
Це текст у масштабованій векторній графіці (SVG)
Курсив
Це курсивний текст у масштабованому векторному графіку (SVG)
Підкреслення
Це підкреслений текст у Scalable Vector Graphic (SVG)
Елемент
У деяких випадках, коли ми хочемо лише застосувати стилі або атрибути до певної частини тексту, ми можемо використовувати
Це сміливо ,це курсив іце підкреслено
Режим запису
Текст не тільки записується з зліва направо. В інших частинах світу, наприклад, Японії, текст написаний зверху вниз. У SVG це можна зробити за допомогою режим запису атрибут.
ぃ ぅ ぇ ぉ か き
У наведеному вище прикладі ми розмістили кілька випадкових японських символів (не запитуйте мене про їхнє значення, я не маю ідеї) і змінюйте орієнтацію за допомогою цієї декларації стилю, режим запису: tb, де tb стоїть зверху вниз.
Текстовий контур
Текст у SVG в основному графічний, тому ми можемо також застосувати інсульт атрибут, щоб додати межу до тексту так само, як ми зробили з іншими фігурами.
У наведеному вище фрагменті коду ми додали інсульт атрибут до заповнити приписувати ні це призведе до наступної презентації тексту.
Шлях тексту
У SVG текст не тільки може відображатися горизонтально і вертикально, але також може слідуйте шаблону Шлях. Ось як це зробити.
По-перше, потрібно визначити Шлях. Однак, створення шляху безпосередньо в HTML не настільки інтуїтивне, ми повинні розуміти координати і деякі команди, які, напевно, більшість з нас спробують уникнути. Отже, щоб зробити цей крок простішим, я особисто пропоную просто відкрити векторний редактор (Inkscape або Illustrator), створити шлях і створити код SVG.
Потім поставте defs тут означає визначення.
Зверніть увагу, що ми також додали id атрибут до id до нашого тексту з
Lorem ipsum dolor сидіти amet consectetur.
Подальше читання: Шляхи SVG
Градієнт тексту
Додавання фону для заповнення тексту також можливе у SVG, і якщо вам вдалося досягти успіху в розділі "Шлях тексту" вище, це буде набагато простіше.
По-перше, нам потрібно визначити кольори градієнта.
Коли всі необхідні визначення налаштовані, тепер нам потрібно лише додати текст і передати його заповнити атрибут градієнта id атрибут, наступним чином;
Градієнт
І ось він, текст з градієнтом.
Подальше читання: Градієнт SVG і шаблон
Подальші посилання
Текст у SVG, безсумнівно, є потужним, насправді багато речей, які ми можемо зробити за межами того, що ми можемо прийняти на цю посаду. Таким чином, нижче ми зібрали ще декілька посилань, щоб задовольнити ваш інтерес до цієї теми.
- Про шрифти у SVG - Divya Manian
- SVG Текст Офіційна документація - W3.org
- SVV Dovumentation у Mozilla Dev. Мережа з прикладами та інструментами - MDN
- Атрибут режиму запису SVG - MDN
- Переглянути демонстрацію
- Завантажити джерело
