Элемент SVG <textPath>
Опубликовано: 25 Февраля, 2022
SVG - это масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML.
Элемент SVG <textPath> используется для визуализации текста по определенному пути.
Чтобы отобразить текст вместе с определенным путем, заключите текст в элемент <textPath>, который имеет атрибут href со ссылкой на элемент <path>.
Синтаксис:
<textPath href = "путь">
Ваш текст здесь
</textPath>
Атрибут:
- href : URL-адрес пути или базовой фигуры, на которой будет отображаться текст.
- lengthAdjust : где к тексту должна быть применена регулировка длины.
- метод : какой метод визуализировать отдельные глифы вдоль пути.
- path : путь, по которому должен отображаться текст.
- Сторона : С какой стороны пути должен отображаться текст.
- интервал : как следует обрабатывать пространство между глифами.
- startOffSet : насколько начало текста должно быть смещено от начала пути.
- textLength : ширина пространства, в котором будет отображаться текст.
- Глобальные атрибуты: используются некоторые глобальные атрибуты, такие как основные атрибуты, атрибуты стиля и т. Д.
Example:
<!DOCTYPE html><html> <body> <svg viewBox="0 0 100 100" <path id="Geek" fill="yellow" stroke="green" d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10, 10 10,40 Q10,70 45,70 Q70,70 75,50" /> <text> <textPath href="#Geek"> The Geeky Text Along The Path </textPath> </text> </svg></body> </html> |
Выход:
Поддерживаемые браузеры: этот элемент SVG поддерживает следующие браузеры:
- Гугл Хром
- Internet Explorer
- Fire Fox
- Apple Safari
- Опера