Текст по кругу

Иногда нам необходимо вывести слова не по прямой, а по изгибам окружности. Но тут мы сталкиваемся с проблемой: CSS не может помочь нам в этом деле! Но мы можем создавать подобные решения с помощью SVG.

Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Простейший способ – поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути. Также, стилизация шрифтов в строковом SVG наследуется, поэтому не нужно беспокоиться о стилях.

<svg class="circle" viewBox="0 0 100 100">
  <path id="circle" d="M 0,50 a 50,50 0 1,1 0,1 z" />
  <text>
    <textPath xlink:href="#circle">
      Делаем текст по кругу
    </textPath>
  </text>
</svg>

Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:

.circle {
  display: block;
  overflow: visible;
  width: 100px;
  font-size: 28px;
  fill: red;
}

.circle path {
    fill: none;
}