Элемент SVG <tspan>
Опубликовано: 25 Февраля, 2022
SVG - это масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML.
Элемент SVG <tspan> определяет подтекст в элементе <text> или другом
<tspan> элемент. Это позволяет настроить стиль и / или положение этого подтекста в соответствии с потребностями пользователя.
Синтаксис:
<tspan attributes = ""> Подтекст </tspan>
Атрибут:
- x: координаты оси x глифов.
- y: координаты оси y глифов.
- dx: сдвиг по оси x.
- dy: сдвинуть вместе с осью y.
- rotate: вращение глифов.
- textlength: отображать длину текста.
- lengthAdjust: корректировка с учетом длины рендеринга.
Пример 1:
Выход:
Example 2: Fading the color of the rectangle
<!DOCTYPE html> < html > < body > < svg viewBox = "0 0 400 400" < style > tspan { fill: green; font: bold 40px sans-serif;} </ style > < text x = "10" y = "30" class = "small" > This is < tspan >Large</ tspan > Text </ text > </ svg > </ body > </ html > |
Выход:
Поддерживаемые браузеры: этот элемент SVG поддерживает следующие браузеры:
- Гугл Хром
- Internet Explorer
- Fire Fox
- Apple Safari
- Опера