Изогнутый текст вдоль пути онлайн урок.


Мы можем передавать текст вдоль кривой линии с тремя инструментами, встроенными прямо в SVG:& lt; path & gt;,& lt; text & gt;и& lt; textPath & gt;.

# Фрагмент

<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath alignment-baseline="top" xlink:href="#curve">
Dangerous Curves Ahead
</textPath>
</text>
</svg>

# Как мы там

Представьте, что мы рисуем кривую линию в SVG и даем ей идентификатор, называемыйcurve.

Затем мы отбрасываем контент в SVG с помощью& lt; text & gt;и присвойте ему ширину, соответствующую размерам SVGviewBox. Мы еще ничего не увидим, но мы знаем, что текст там где-то на экране.

Мы действительно хотим видеть этот текст. Мы можем обернуть наш текст в& lt; textPath & gt;и установите его, чтобы следовать линиям нашего изогнутого пути, вызвав идентификатор пути, который мы установили ранее.

Теперь мы готовим газ!

Мы не хотим, чтобы эта кривая была видна, поэтому давайте путь прозрачной заливки. Мы могли бы также сделать это в CSS, но мы применяем его встроенный непосредственно в разметке SVG для этого примера.

Остальное - это CSS! Точный размер шрифта будет зависеть от самого текста и от того, какое семейство шрифтов используется, но, как только вы нажмете правильный баланс, SVG сам будет реагировать на отзывчивость и обеспечить, чтобы все оставалось на кривой в любом масштабе.

Мы могли бы применить этот же метод к любому типу искривленного пути.