Головна » Кодування » Робота з текстом у масштабованій векторній графіці (SVG)

    Робота з текстом у масштабованій векторній графіці (SVG)

    У попередніх посадах ми використовували SVG для створення фігур. У цій посаді, як сказано в назві, ми розглянемо створення тексту з SVG. Є багато речей, які ми можемо зробити з текстом за межами того, що може зробити звичайний текст HTML.

    Отже, давайте перевіримо їх.

    Базова реалізація

    Але, перш ніж піти далі, подивимося, як Текст у SVG формується на самому базовому рівні:

      Це масштабований векторний графічний (SVG) текст  

    Текст у SVG, як видно з наведеного вище фрагмента коду, визначається досить логічним тегом, . Цей елемент в основному вимагає x і y атрибути для визначення координат базової лінії.

    Джерело зображення: Wikipedia.org

    І ось як буде виглядати текст. На даний момент, здається, він не відрізняється від звичайного тексту в HTML.

    Основні стилі тексту

    Текст також може бути оформлений за допомогою властивостей CSS, таких як font-weight, стиль шрифту, і текст-прикраса які можуть бути реалізовані або через внутрішній стиль, внутрішній стиль або зовнішній стиль як ми обговорювали в попередньому повідомленні Стилізація SVG за допомогою CSS. Ось деякі з прикладів.

    Жирний

     Це текст у масштабованій векторній графіці (SVG) 

    Курсив

     Це курсивний текст у масштабованому векторному графіку (SVG) 

    Підкреслення

     Це підкреслений текст у Scalable Vector Graphic (SVG) 

    Елемент

    У деяких випадках, коли ми хочемо лише застосувати стилі або атрибути до певної частини тексту, ми можемо використовувати . Наведений нижче приклад показує, як ми додаємо жирний, курсивом і підкреслення до одного рядка тексту.

     Це сміливо, це курсив і це підкреслено 

    Режим запису

    Текст не тільки записується з зліва направо. В інших частинах світу, наприклад, Японії, текст написаний зверху вниз. У SVG це можна зробити за допомогою режим запису атрибут.

     ぃ ぅ ぇ ぉ か き  

    У наведеному вище прикладі ми розмістили кілька випадкових японських символів (не запитуйте мене про їхнє значення, я не маю ідеї) і змінюйте орієнтацію за допомогою цієї декларації стилю, режим запису: tb, де tb стоїть зверху вниз.

    Текстовий контур

    Текст у SVG в основному графічний, тому ми можемо також застосувати інсульт атрибут, щоб додати межу до тексту так само, як ми зробили з іншими фігурами.

      Це SVG-текст  

    У наведеному вище фрагменті коду ми додали інсульт атрибут до елемент і видалити колір тексту, вказавши заповнити приписувати ні це призведе до наступної презентації тексту.

    Шлях тексту

    У SVG текст не тільки може відображатися горизонтально і вертикально, але також може слідуйте шаблону Шлях. Ось як це зробити.

    По-перше, потрібно визначити Шлях. Однак, створення шляху безпосередньо в HTML не настільки інтуїтивне, ми повинні розуміти координати і деякі команди, які, напевно, більшість з нас спробують уникнути. Отже, щоб зробити цей крок простішим, я особисто пропоную просто відкрити векторний редактор (Inkscape або Illustrator), створити шлях і створити код SVG.

    Потім поставте елемент всередині a елемент. 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
    • Переглянути демонстрацію
    • Завантажити джерело