Текст

Говоря о тексте в SVG, необходимо различать две почти полностью отдельные темы. Первая — добавление и отображение текста на изображении, вторая — шрифты SVG. Последняя тема описана в более позднем разделе учебника, а на этой странице мы сосредоточимся на первой: добавлении текста в изображение SVG.

Основы

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

<text x="10" y="10">Hello World!</text>

Атрибуты x и y определяют, где именно во viewport будет отображаться текст. Атрибут text-anchor, который может принимать значения "start", "middle", "end" или "inherit", определяет направление, в котором текст располагается от этой точки. Атрибут dominant-baseline задаёт вертикальное выравнивание.

Как и фигуры, текст можно раскрасить с помощью атрибута fill и задать ему обводку с помощью атрибута stroke. Оба атрибута также могут ссылаться на градиенты или узоры, что делает возможности раскрашивания текста в SVG очень широкими.

Настройка свойств шрифта

Важная составляющая текста — шрифт, которым он отображается. SVG предоставляет набор атрибутов, многие из которых похожи на соответствующие свойства CSS, чтобы можно было выбрать шрифт. Каждое из следующих свойств можно задать как атрибут или с помощью объявления CSS: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, letter-spacing, word-spacing и text-decoration.

Другие элементы, связанные с текстом

tspan

Этот элемент используется для разметки отдельных фрагментов более длинного текста. Он должен быть дочерним элементом text или другого элемента tspan. Типичный пример использования — выделение одного слова в предложении жирным красным цветом.

<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">
  <text>
    This is
    <tspan font-weight="bold" fill="red">bold and red</tspan>
  </text>

  <style>
    <![CDATA[
      text {
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

Элемент tspan имеет следующие специальные атрибуты:

x

Задаёт новые абсолютные координаты x для содержащего его текста. Это переопределяет текущую позицию текста по умолчанию. Атрибут также может содержать список чисел, которые последовательно применяются к отдельным символам элемента tspan.

dx

Начинает отрисовку текста с горизонтальным смещением dx относительно текущей позиции по умолчанию. Здесь тоже можно указать список значений, применяемых к последовательным символам, в результате чего смещение будет постепенно накапливаться.

Аналогично, для вертикального смещения используются y и dy.

rotate

Поворачивает все символы на указанное число градусов. Если задан список чисел, каждый символ поворачивается на соответствующее ему значение, а оставшиеся символы — на последнее значение из списка.

textLength

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

textPath

Этот элемент получает произвольный контур через атрибут href и располагает вдоль него окружающие его символы:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
  <text>
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" href="#my_path">
      A curve.
    </textPath>
  </text>

  <style>
    <![CDATA[
      text {
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>