Как сделать текст по кругу в SVG - Блог Антона Лапина Как сделать текст по кругу в SVG - Блог Антона Лапина

Как сделать текст по кругу в SVG

Бывают задачи, когда нужно сделать редактируемый текст по кругу.
Можно использовать средства CSS и HTML, но такие методы слишком ресурсоемкие.
Для решения предлагаю использовать SVG-технологию:

Как сделать текст по кругу в SVG

Скопируйте код и вставьте в блокнот:

<svg xmlns="http://www.w3.org/2000/svg” xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
   <defs>
      <path d="M243.2, 382.4c-74.8, 0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5, 135.5 S318, 382.4, 243.2, 382.4z" id="textcircle" />
<style>text {font-size: 20px; font-family: Arial; font-weight: 900; letter-spacing: 15px;}</style>
   </defs>
      <text dy="70" textLength="1200"><textPath xlink:href="#textcircle">Gismeteo.ru</textPath></text>
</svg>

Обратиться к элементу в коде можно через JavaScript.