<text>

Элемент <text> SVG рисует графический элемент, состоящий из текста. К <text>, как и к любому другому графическому элементу SVG, можно применить градиент, узор, обтравочный контур, маску или фильтр.

Если текст включён в SVG не внутри элемента <text>, он не отображается. Это отличается от скрытия по умолчанию: установка свойства display не сделает текст видимым.

Контекст использования

Атрибуты

x

Координата x начальной точки базовой линии текста или координата x каждого отдельного глифа, если задан список значений. Тип значения: список из (<length> | <percentage>); Значение по умолчанию: 0; Анимируемый: да

y

Координата y начальной точки базовой линии текста или координата y каждого отдельного глифа, если задан список значений. Тип значения: список из (<length> | <percentage>); Значение по умолчанию: 0; Анимируемый: да

dx

Смещает положение текста по горизонтали относительно предыдущего текстового элемента или смещает положение каждого отдельного глифа, если задан список значений. Тип значения: список из (<length> | <percentage>); Значение по умолчанию: нет; Анимируемый: да

dy

Смещает положение текста по вертикали относительно предыдущего текстового элемента или смещает положение каждого отдельного глифа, если задан список значений. Тип значения: список из (<length> | <percentage>); Значение по умолчанию: нет; Анимируемый: да

rotate

Поворачивает ориентацию каждого отдельного глифа. Глифы можно поворачивать по отдельности. Тип значения: <list-of-number>; Значение по умолчанию: нет; Анимируемый: да

lengthAdjust

Способ растяжения или сжатия текста для соответствия ширине, заданной атрибутом textLength. Тип значения: spacing | spacingAndGlyphs; Значение по умолчанию: spacing; Анимируемый: да

textLength

Ширина, до которой следует масштабировать текст. Тип значения: <length> | <percentage>; Значение по умолчанию: нет; Анимируемый: да

Интерфейс DOM

Этот элемент реализует интерфейс SVGTextElement.

Пример

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
    }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr {
      font: italic 40px serif;
      fill: red;
    }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

Спецификации

Совместимость с браузерами

См. также

• white-space
• <tspan>