Элемент 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" 
         xmlns="http://www.w3.org/2000/svg">
        <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
Опера

HTML

Элемент SVG <tspan>

РЕКОМЕНДУЕМЫЕ СТАТЬИ