SVG: текст в векторной графике

В предыдущих уроках серии мы рассмотрели основы работы с SVG в HTML. Данный урок будет посвящен использованию текста в векторной графике.

demosourse

 

Основы

Вот так формируется текст в SVG:

<svg>
<text x="0" y="15">Текст в <a href="http://ruseller.com/project.php?id=12" style="" target="_blank" rel="nofollow">масштабируемой векторной графике</a> (SVG) </text>
</svg>

Текст в элементе SVG определяется с помощью тега <text>. Для данного тега требуется только указание атрибутов x и y, с помощью которых задается базовая линия текста.

В таком формате отличий от обычного текста HTML не наблюдается.

 

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

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style и text-decoration, которые определяются любым из описанных в уроке о стилизации SVG с помощью CSS. Вот несколько примеров.

Жирный текст

<svg>
<text x="0" y="15" style="font-weight: bold;">Жирный текст в масштабируемой векторной графике(SVG)</text>
</svg>

Жирный текст

Курсив

<svg>
<text x="0" y="15" style="font-style: italic;">Текст курсивом в масштабируемой векторной графике(SVG)</text>
</svg>

Текст курсивом

Подчеркнутый текст

<svg>
<text x="0" y="15" style="text-decoration: underline;">Подчеркнутый текст в масштабируемой векторной графике(SVG)</text>
</svg>

Подчеркнутый текст

Используем элемент <tspan>

В некоторых случаях нужно применить стили или атрибуты только для определенной части. В такие моменты можно использовать элемент <tspan>. Пример ниже показывает, как добавить жирный, курсивом и подчеркнутый текст в одну строку.

<svg>
<text x="0" y="15"><tspan style="font-weight: bold;">Жирный текст</tspan>, <tspan style="font-style: italic;">текст курсивом</tspan> и <tspan style="text-decoration: underline;">подчеркнутая часть</tspan>.</text>
</svg>

Используем элемент tspan

 

Режим вывода текста

Текст в мире пишется не только слева-направо. Например, в Японии текст пишут сверху вниз. В такие ситуации можно разрешить с помощью атрибута writing-mode.

<svg>
<text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text>
</svg>

В выше приведенном примере несколько случайных японских символов (смысл надписи скрыт для автора) выводятся со сменой ориентации, определенной в стилях:  writing-mode: tb, где tb - top-to-bottom (сверху-вниз).

Ориентация текста

 

Обводка текста

В SVG текст является графикой, и мы можем применять для него атрибут stroke и определять линию обводки, как для других графических объектов.

<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">Обводка</text>
</svg>

В выше приведенном примере мы добавили атрибут stroke к элементу <text> и удалили цвет текста с помощью атрибута fill со значением none.

Обводка текста

 

Текст по линии

В SVG текст может выводиться не только вертикально или горизонтально, но и по заданной линии.

Для начала нужно определить траекторию. Однако создание траектории непосредственно в HTML достаточно трудоемкое занятие. Можно воспользоваться векторным редактором (Inkscape или Illustrator), создать нужную траекторию и сохранить SVG код.

Затем взять элемент <path> из элемента <defs>.

<defs>
<path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>

Обратите внимание, что мы добавили атрибут id к элементу <path>. Теперь нужно привязать траекторию с идентификатором id к нашему тексту в элементе <textPath>:

<use xlink:href="#textpath"/>
<text x="10" y="100">
<textPath xlink:href="#textpath">
Lorem ipsum dolor sit amet consectetur.
</textPath>
</text>

Текст по траектории

 

Градиент

Заполнение текста также возможно в SVG.

Сначала нужно определить цвета градиента.

<defs>
<linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop stop-color="#999" offset="0%"/>
    <stop stop-color="#111" offset="100%"/>
</linearGradient>
</defs>

Когда все необходимые определения установлены нужно только добавить текст и связать атрибут fill с атрибутом id градиента:

<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиент</text>

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

 

В следующем уроке мы рассмотрим анимации SVG графики.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/scalable-vector-graphics-text/
Перевел: Сергей Фастунов
Урок создан: 26 Декабря 2012
Просмотров: 31221
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Декабря 2012 16:52
    hyzin
    Отлично:) Градиент порадовал)
  • 27 Декабря 2012 14:31
    Zama13
    Kotak отлично[
  • 28 Декабря 2012 16:06
    Айбек Маженов
    спасиб=) радует серия уроков по СВГ)
  • 29 Декабря 2012 02:02
    RebelioUS
    Да, спасибо! Работа с текстом очень важная составляющая!
    • 30 Декабря 2012 03:18
      ALEX34RUS
      test comment ajax reload
  • 16 Апреля 2013 13:59
    micha
    это ж надо...! Оказывается и такое есть.
^ Наверх ^