Рассмотрим на примере, когда траектория представляет собой окружность.
Начало текста всегда совпадает с началом path
, то есть с первой M
в <path d="M50 200"
Чтобы нижнюю часть траектории заполнить буквами в нормальном расположении, нужно сделать её отдельно от верхней части.
Верхняя половина окружности:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<path id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="blue" stroke-width="2" />
</svg>
Добавляем нижнюю половину окружности:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<path id="top" d="M50 200 A150 150 0 1 1 350 200" fill="none" stroke="blue" stroke-width="2" />
<path id="bottom" d="M50 200 A150 150 0 1 0 350 200" fill="none" stroke="crimson" stroke-width="2" />
</svg>
Обратите внимание, что формулы для обоих половинок окружностей практически одинаковы, за исключением флага sweep-flag, который отвечает за направление рисования по часовой -1
или против часовой - 0 ), подробнее здесь
Теперь на верхнюю и нижнюю дугу с помощью textPath
размещаем текст.
Ещё один нюанс, раз половинки текста стали самостоятельными, то для них можно выбрать разные атрибуты шрифтов. Например: font-size="36px" font-family="Comic Sans MS" font-weight="bold" fill="grey"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" style="border:0px solid;" >
<path id="top" d="M50 200 A150 150 0 1 1 350 200" fill="none" stroke="#111111" stroke-width="2" />
<path id="bottom" d="M50 200 A150 150 0 1 0 350 200" fill="none" stroke="crimson" stroke-width="2" />
<circle cx="200" cy="200" r="198" fill="none" stroke="grey" stroke-width="4" />
<text dy="-12px" dx="0" font-size="36px" font-family="Times New Roman" font-weight="bold" fill="black" letter-spacing="6" >
<textPath xlink:href="#top" startOffset="5%"> Top arc outside text
</textPath>
</text>
<text dy="32px" dx="0" font-size="36px" font-family="Comic Sans MS" font-weight="bold" fill="grey" letter-spacing="5" >
<textPath xlink:href="#bottom" startOffset="3%"> Bottom arc text outside
</textPath>
</text>
</svg>