- PVSM.RU - https://www.pvsm.ru -
Продолжаем изучать векторную графику, на этот раз разберемся с текстами в SVG, которые позволяют делать гораздо больше, чем обычный HTML.
Предыдущие статьи: Знакомство с SVG-графикой [1] и Стилизация SVG-графики [2]
Прежде всего рассмотрим основной синтаксис, который представляет собой тег text c координатам x и y, определяющими baseline:
<svg>
<text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text>
</svg>
Такой SVG-текст ничем не отличается от обычного:
Текст может быть стилизован с помощью CSS: font-weight, font-style, и text-decoration, как и обычный HTML. Если необходимо применить стиль к отдельному элементу, то необходимо использовать тег tspan:
<svg>
<text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan></text>
</svg>
Можно изменять ориентацию текста с обычной (слева направо) на какую-то другую, например как в Японии, сверху вниз с помощью конструкции writing-mode: tb, где tb — это «top-to-bottom»
<svg>
<text x="70" y="20" style="writing-mode: tb;" class="japanese">???????</text>
</svg>
SVG-текст — это в первую очередь векторное изображение, поэтому с помощью outline можно добавить обводку и изменить заливку с помощью fill:
<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="none">This is SVG Text</text>
</svg>
В SVG текст можно отображать не только горизонтально или вертикально, но и по направляющей — любой векторной кривой. Аналогию можно найти в графическом редакторе (например Adobe Illustrator), используя инструмент Pen Tool:
В коде должны быть теги 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>
Также необходимо с помощью textPath «запустить» текст по направляющей:
<use xlink:href="#textpath"/>
<text x="10" y="100">
<textPath xlink:href="#textpath">
Lorem ipsum dolor sit amet consectetur.
</textPath>
</text>
Также можно добавить градиент для заливки текста. Сначала необходимо задать цвета:
<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:
<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>
Чтобы использовать web-safe шрифты, достаточно простой конструкции (демо [3]):
<text x="100" y="100" style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: normal">
Text using web safe font
</text>
Для использования @font-face необходимо объявить шрифты в теге defs, тогда принцип работы будет такой же, как в HTML (демо [4]):
<defs>
<style type="text/css">
<![CDATA[
@font-face {
font-family: Delicious;
src: url('http://nimbupani.com/demo/svgfonts/delicious-roman.otf');
}
]]>
</style>
</defs>
<text x="100" y="100" style="font-family: 'Delicious'; font-weight:normal; font-style: normal">
Text using CSS @font-face
</text>
Также существуют SVG-шрифты (с расширением .svg, несколько примеров [5]), которые можно использовать двумя способами: вызывая внешний SVG-шрифт либо используя уже встроенный в .svg-файл. В этой статье [6] подробно рассказано об этих способах.
Преимущества использования SVG-шрифтов:
Использование SVG-текста, безусловно, намного более гибко, чем обычный HTML. Главное — уметь правильно и к месту применять этот инструмент. Стоит напомнить, что SVG не поддерживается [7] в IE 8 и ниже.
Демонстрация всех примеров [8] / Скачать исходники [9]
Полезно почитать:
Автор: grokru
Источник [15]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/20312
Ссылки в тексте:
[1] Знакомство с SVG-графикой: http://habrahabr.ru/post/157087/
[2] Стилизация SVG-графики: http://habrahabr.ru/post/157965/
[3] демо: http://nimbupani.com/demo/svgfonts/svg-websafe.svg
[4] демо: http://nimbupani.com/demo/svgfonts/svg-fontface.svg
[5] несколько примеров: http://devfiles.myopera.com/articles/751/SVGfonts_in_HTML.html
[6] В этой статье: http://frabru.de/c.php/article/SVGFonts-usage
[7] не поддерживается: http://caniuse.com/#search=SVG
[8] Демонстрация всех примеров: http://koulikov.com/wp-content/uploads/2012/11/svg3/
[9] Скачать исходники: http://koulikov.com/wp-content/uploads/2012/11/svg3/svg3.zip
[10] SVG Text официальная документация: http://www.w3.org/TR/SVG/text.html
[11] About Fonts in SVG: http://nimbupani.com/about-fonts-in-svg.html
[12] Оригиналы примеров: http://www.hongkiat.com/blog/scalable-vector-graphics-text/
[13] SVG Dovumentation at Mozilla Dev. Network with Examples and Tools: https://developer.mozilla.org/en-US/docs/SVG
[14] SVG Writing Mode Attribute: https://developer.mozilla.org/en-US/docs/SVG/Attribute/writing-mode
[15] Источник: http://habrahabr.ru/post/159017/
Нажмите здесь для печати.