SVG Text - Учим HTML

Описание элемента `<text>`

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

Примечание: SVG <text> не переносится автоматически. Один элемент <text> отображается в одну строку; текст не будет переноситься на новую строку при достижении края SVG-холста. Чтобы разбить текст на несколько строк, нужно позиционировать строки вручную с помощью элементов <tspan> (каждому задаётся своя координата y), использовать отдельные элементы <text> или направлять текст вдоль пути с помощью <textPath>.

SVG-текст поддерживает такие типографские возможности, как оформление текста, выбор гарнитуры, а также использование дискреционных, стилистических и исторических лигатур.

SVG также поддерживает потребности международной обработки текста:

письмо слева направо или двунаправленное письмо,
вертикальная и горизонтальная ориентация текста,
сложная вёрстка текста,
выравнивание глифов по разным базовым линиям.

Можно создавать многоязычное SVG-содержимое, подставляя различные строки в зависимости от предпочтительного языка пользователя.

Для стилизации текста можно использовать специфичные для текста CSS-свойства, такие как font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width и fill.

Пример элемента SVG `<text>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" >
      <text x="20" y="25" fill="purple">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Попробуйте сами »

Поворот текста: `transform` и атрибут `rotate`

Существует два разных способа повернуть SVG-текст, которые легко спутать:

transform="rotate(angle cx cy)" поворачивает весь элемент <text> как единый блок вокруг центральной точки. Строка остаётся прямой; наклоняется вся линия целиком.
Атрибут rotate поворачивает каждый отдельный глиф (символ) на месте. Буквы стоят под углом, но линия текста по-прежнему идёт горизонтально.

В следующем примере используется transform, чтобы наклонить всю строку на 40 градусов вокруг точки (30, 60):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="150" style="border:1px solid red">
      <text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Попробуйте сами »

В отличие от этого, атрибут rotate поворачивает каждый символ отдельно, не наклоняя базовую линию:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="80" style="border:1px solid #cccccc">
      <text x="20" y="50" fill="purple" rotate="25">Glyphs rotated</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Выравнивание текста с помощью `text-anchor` и `dominant-baseline`

По умолчанию координаты x/y отмечают начало текста и находятся на алфавитной базовой линии. Два атрибута изменяют это поведение:

text-anchor управляет горизонтальным выравниванием относительно x. Значения: start (по умолчанию, текст начинается в точке x), middle (текст центрируется по x) и end (текст заканчивается в точке x). Это необходимо для центрирования подписей.
dominant-baseline управляет вертикальным выравниванием относительно y. Распространённые значения: auto/alphabetic (по умолчанию), middle, central, hanging и text-bottom. Используйте middle для вертикального центрирования текста по координате y.

В следующем примере все три подписи имеют одинаковое x="125", но text-anchor задаёт им разное выравнивание относительно пунктирной линии:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="120" style="border:1px solid #cccccc">
      <line x1="125" y1="0" x2="125" y2="120" stroke="red" stroke-dasharray="4" />
      <text x="125" y="30" text-anchor="start">start</text>
      <text x="125" y="60" text-anchor="middle">middle</text>
      <text x="125" y="90" text-anchor="end">end</text>
    </svg>
  </body>
</html>

Использование `<tspan>` для нескольких строк

Элемент <tspan> является дочерним элементом <text> и позволяет изменить положение, стиль или форматирование фрагмента текста без выхода из родительского элемента <text>. Поскольку SVG-текст не переносится автоматически, <tspan> — это стандартный способ разбить один логический блок текста на несколько строк: задайте каждому <tspan> собственные x и y (или используйте dy для смещения от предыдущей строки).

Используйте <tspan> вместо отдельных элементов <text>, когда части относятся к одному доступному ярлыку или имеют общий стиль — <tspan> наследует атрибуты родителя и остаётся частью одного текстового узла. Используйте отдельные элементы <text>, когда части действительно независимы.

В следующем примере <tspan> используется для позиционирования трёх строк:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="450" height="150" style="border:1px solid #cccccc">
      <text x="20" y="20" style="fill:green">
        Example of the SVG "text" element used with the "tspan" element
        <tspan x="25" y="65">This is a SVG text.</tspan>
        <tspan x="35" y="90">This is a SVG text.</tspan>
        <tspan x="45" y="115">This is a SVG text.</tspan>
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Попробуйте сами »

Размещение текста вдоль пути с помощью `<textPath>`

Чтобы текст следовал кривой или любой другой форме, оберните его в элемент <textPath> и укажите в атрибуте href идентификатор элемента <path> (или другой фигуры). Тогда текст будет течь вдоль этого пути. Определите путь внутри <defs>, чтобы он был повторно используемым и не отображался сам по себе. Смотрите главу SVG <path> для подробностей о работе с данными пути (d).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="120" style="border:1px solid #cccccc">
      <defs>
        <path id="curve" d="M20,90 Q150,10 280,90" />
      </defs>
      <text fill="purple">
        <textPath href="#curve">Text flowing along a curved path</textPath>
      </text>
    </svg>
  </body>
</html>

Пример элемента SVG `<text>` с элементом `<a>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" style="border:1px solid #cccccc">
      <a href="/learn-html/svg-intro" target="_blank">
        <text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
      </a>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Попробуйте сами »

Стилизация и доступность

Текст внутри <text> и <tspan> стилизуется с помощью специфичных для текста свойств, которые можно задавать как атрибуты представления (например, font-size="20", font-weight="bold", font-family="Verdana") или с помощью CSS. Наиболее распространённые из них: font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (цвет текста) и stroke/stroke-width (контур). Атрибуты, связанные с компоновкой, см. в таблице Атрибуты ниже.

Доступность: SVG-текст отрисовывается как графика, поэтому он не всегда доступен вспомогательным технологиям так же, как обычный HTML-текст. Добавьте значимым SVG-элементам <title> в качестве первого дочернего элемента <svg> (или <text>), а также aria-label/role="img", чтобы программы чтения с экрана могли их озвучивать. Например:
<svg width="250" height="60" role="img" aria-label="SVG text example">
  <title>SVG text example</title>
  <text x="20" y="40" fill="purple">Accessible SVG text</text>
</svg>

Атрибуты

Атрибут	Описание
x	Задаёт начальную координату x базовой линии текста.
y	Задаёт начальную координату y базовой линии текста.
dx	Задаёт горизонтальное смещение позиции текста от предыдущей позиции текста.
dy	Задаёт вертикальное смещение позиции текста от предыдущей позиции текста.
rotate	Поворачивает каждый отдельный глиф (не весь элемент — для этого используйте `transform="rotate(...)"` ).
lengthAdjust	Задаёт способ сжатия или растяжения текста для соответствия ширине, заданной атрибутом textLength.
textLength	Задаёт ширину, которой должен соответствовать текст.
text-anchor	Задаёт горизонтальное выравнивание текста: `start`, `middle` или `end`.
dominant-baseline	Задаёт вертикальное выравнивание текста относительно базовой линии (например, `middle`, `hanging`).
font-family	Задаёт гарнитуру, например `Arial, sans-serif`.
font-size	Задаёт размер текста, например `20` или `1.5em`.
font-weight	Задаёт насыщенность, например `normal` или `bold`.
font-style	Задаёт начертание, например `normal` или `italic`.

Элемент SVG <text> также поддерживает глобальные атрибуты и атрибуты событий.

Практика

Какой атрибут центрирует SVG-текст горизонтально по координате 'x'?

text-anchor='middle'dominant-baseline='middle'rotate='90'text-align='center'

Описание элемента <text>

Пример элемента SVG <text>:

Поворот текста: transform и атрибут rotate

Выравнивание текста с помощью text-anchor и dominant-baseline

Использование <tspan> для нескольких строк

Размещение текста вдоль пути с помощью <textPath>

Пример элемента SVG <text> с элементом <a>:

Стилизация и доступность

Атрибуты

Практика

Описание элемента `<text>`

Пример элемента SVG `<text>`:

Поворот текста: `transform` и атрибут `rotate`

Выравнивание текста с помощью `text-anchor` и `dominant-baseline`

Использование `<tspan>` для нескольких строк

Размещение текста вдоль пути с помощью `<textPath>`

Пример элемента SVG `<text>` с элементом `<a>`: