Элемент 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
  • Опера