В предыдущих уроках серии мы рассмотрели основы работы с SVG в HTML. Данный урок будет посвящен использованию текста в векторной графике.
Основы
Вот так формируется текст в 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>
Режим вывода текста
Текст в мире пишется не только слева-направо. Например, в Японии текст пишут сверху вниз. В такие ситуации можно разрешить с помощью атрибута 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 графики.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/HY8QgdyocmE/lessons.php
Источник: