Как написать текст по кругу в svg

how-to-write-text-along-circle-path.md

1 Берем пример svg (как код) с текстом по кругу. Сохраняем у себя в gist, где сразу можно просматривать результат...

редактируем...

2 вписываем свой текст в строке 21:

        <textPath xlink:href="#textcircle">
            ВОТ СЮДА
        </textPath>

3 Что бы поменять размер круга, нужно пропсать значение атрибута d тега path:

<path d="M25,100a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" id="textcircle" />

Это значение можно сгенерировать по ссылке предоставив координаты центра круга (CX, CY) и радиус (R)

Если нужно - можно подтюнить размер холста в

     width="200" 
     height="200">

4 Вдруг что, можно подтюнить размер шрифта, и так далее, в соответствующих параметрах, типа:

        text { 
            font-size: 11px;

Полезные ссылки:

• этот же пример, на codepen
• Расположить текст по кругу с помощью SVG (перевод)
  • оригинал
    • пример на кодпен
• объясняется как подобрать значение для path
• SVG Canvas

сюда бы еще способ того как в другую сторону текст вывернуть.
т.е. что бы низ букв был близко друг к другу, а не верхушки