Вёрстка сайтов | HTML, CSS, JS: “Как сделать круговой текст? Попробуем реализовать эту задачу при помощ…”

Как сделать круговой текст?

Попробуем реализовать эту задачу при помощи svg.

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

<svg class="circle-text" viewBox="0 0 100 100">
  <path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
  <text>
    <textPath xlink:href="#circle-text">
      Круговой текст
    </textPath>
  </text>
</svg>

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

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

#полезности