Что такое SVG? Пишем текст.
В SVG помимо отрисовки каких-то фигур мы, также, можем писать текст. Вот о том, как писать текст на SVG, мы и поговорим в этой статье.
Чтобы написать текст в SVG, достаточно использовать тег text.
<svg>
<text x="100" y="70">Какой-то текст</text>
</svg>
Атрибуты x и y задают начальную точку, от которой пойдёт текст.
Текст можно стилизовать с помощью css. Как это делать было рассмотрено в предыдущей статье.
<svg>
<text x="10" y="10" style="font-weight: bold;">Какой-то жирный текст</text>
<text x="10" y="30" style="font-style: italic;">Какой-то курсивный текст</text>
<text x="10" y="50" style="text-decoration: underline;">Какой-то подчёркнутый текст</text>
</svg>
Если мы хотим, чтобы в html у какого-то участка текста были свои стили, то оборачиваем его в тег span. В SVG такое тоже возможно, но тег называется tspan.
<svg>
<text x="10" y="10"><tspan style="text-decoration: underline;">Подчёркнутое</tspan> слово</text>
</svg>
Чтобы поменять направление текста, пропишем стиль writing-mode.
<svg>
<text x="10" y="10" style="writing-mode: tb;">Текст справа на лево</text>
</svg>
Но работает это только в Internet Explorer.
В SVG мы можем обвести текст с помощью stroke для создания знаменитого эффекта.
<svg>
<text x="10" y="100" font-weight="bold" fill="rgba(200,200,200,.1)" stroke="#ccc" stroke-width="0.5" font-size="70px">Текст</text>
</svg>
Теперь рассмотрим, как задавать градиенты в SVG.
<svg>
<defs>
<linearGradient id="grad">
<stop style="stop-color: #fff" offset="0%">
<stop style="stop-color: #000" offset="100%">
</linearGradient>
</defs>
<text x="10" y="10" font-size="70" font-weight="bold" fill="url(#grad)">Какой-то текст</text>
</svg>
Чтобы создать градиент, нужно использовать тег linearGradient внутри тега defs. В стилях мы задаём цвет, а в offset указываем откуда и куда идти градиенту. В нашем случае слева направо, от самого начала до самого конца текста. Затем, чтобы привязать созданный нами градиент, мы в свойстве fill пишем url(), а внутри id, который указали в теге linearGradient. С помощью атрибутов x1, x2, y1 и y2 можно указывать направление текста.
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="3" y2="3">
<stop style="stop-color: #fff" offset="0%">
<stop style="stop-color: #000" offset="100%">
</linearGradient>
</defs>
Если вам нужен радиальный градиент, то используйте тег radialGradient.
<radialGradient id="grad">
<stop style="stop-color: #fff" offset="0%">
<stop style="stop-color: #000" offset="100%">
</radialGradient>
И в заключении рассмотрим, как поменять траекторию текста в SVG.
<svg>
<defs>
<path id="curveLine" 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>
<text x="10" y="100">
<textPath xlink:href="#curveLine">
Какой-то очень длинный текстище!!!
</textPath>
</text>
</svg>
В теге path, в атрибуте d, мы указываем координаты кривой Безье. Также, не забываем указать id, который затем привязываем к нашему тексту в теге textPath.
Итак, на этом всё. Сегодня вы узнали, как использовать текст в SVG.
-
Создано 11.05.2014 20:48:15
-
Михаил Русаков
Комментарии (2):
как с помощью кривой безье сделать вертикальный текст, и будет ли он поддерживать в браузерах
Ответить
Здравствуйте, Михаил. Огромное спасибо за этот ресурс! Изучаю основы HTML и дошёл до статьи "Что такое SVG? Пишем текст". При попытке прописать цвет текста (и не только) в виде кода (например:#0000-черный) ничего не получается, а если прописать "black" то отображается. Пробовал на разных браузерах-результат тот же. Спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.