Элемент <textPath> SVG

Элемент SVG <textpath> используется для размещения текста по пути (например, по окружности), что создает очень эффектный вид. Разные браузеры по-разному отображают текст по пути, поэтому убедитесь, что текст выглядит правильно в поддерживаемых браузерах.

Онлайн пример

<svg width="500" height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1 0 0,0 100,0" />　　　　
</defs>　　　　
<text x="20" y="80" style="stroke: #000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com базовый курс...</textPath>　　　　
</text>　　　　
</svg>

Эффект изображения после выполнения:

Обратите внимание, как элемент <path> (внутри элемента <defs>) имеет атрибут id. Значение этого атрибута id ссылается на <textpath> через атрибут xlink:href.

Если длина пути короче длины текста, то нарисуется только та часть текста, которая находится в пределах расширения пути.

Вы также можете использовать более сложные пути. Вот пример более сложного текстового пути:

<svg width="500" height="200">
　　　　<defs>
　　　　　　　　<path id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20 l100,0 l100,30 q0,100 150,100"/>
　　　　</defs>
　　　　<text x="20" y="40" style="stroke: #000000;">
　　　　　　　　<textPath xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　Основной учебник....
　　　　　　　　</textPath>
　　　　</text>
</svg>

Этот пример определяет текстовый путь, состоящий из горизонтальной линии, диагонали и кривой.

Эффект изображения после выполнения: