Тексты

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

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

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

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

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

Этот элемент используется для разметки подстрок большего текста. Он должен быть потомком элемента 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

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

Этот элемент получает с помощью атрибута 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>