Элемент <tspan> SVG

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

Пример tspan

Это пример использования <tspan>:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>tspan строка 1</tspan>
　　　　　　　　<tspan>tspan　строка　2</tspan>
　　　　</text>
</svg>

Вот результат изображения:

Обратите внимание, как результат <tspan> влияет на положение строк текста по отношению друг к другу (после друг друга).

Вертикальное позиционирование

Если нужно разместить строки текста вертикально относительно друг друга, можно использовать атрибут dy (delta y):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>tspan строка 1</tspan>
　　　　　　　　<tspan　dy="10">tspan　строка　2</tspan>
　　　　</text>
</svg>

Теперь, поскольку атрибут dy второго элемента <tspan> установлен в "10", вторая строка текста отображается на 10 пикселей ниже первой строки текста. Вот результат изображения:

Если нужно расположить элемент <tspan> в абсолютной вертикальной позиции y, используйте атрибут так же, как и для элемента <text>.

Если в атрибуте dy写入多个 числа, каждое из них будет применяться к символам текста в элементе <tspan>. Вот пример:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text　x="10"　y="15">
　　　　　　　　　　　　<tspan　dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

Это созданное изображение. Обратите внимание, как изменилось вертикальное расстояние между знаками.

Горизонтальное позиционирование

Чтобы расположить текст относительно по оси x, можно использовать атрибут dx (delta x). Вот пример, где значение dx установлено на 30: обратите внимание, что теперь вторая строка текста отображается относительно конца первой строки текста на 30 пикселей:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>tspan строка 1</tspan>
　　　　　　　　<tspan dx="30" dy="10">tspan строка 2</tspan>
　　　　</text>
</svg>

Вот результат изображения:

Если в свойстве dx указать несколько чисел, каждое из них будет применено к каждому символу в элементе <tspan>. Вот пример:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　<tspan dx="5 10 20">123</tspan>
</text></svg>

Вот результат изображения:

Вы также можете установить значение свойства x для фиксированного координаты x строки текста. Если нужно показать список всех неотрегулированных строк под друг друга, это будет полезно. Вот пример, где значение x установлено на 10 для трёх строк:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text y="20">
　　　　　　　　<tspan x="10">tspan строка 1</tspan>
　　　　　　　　<tspan x="10" dy="15">tspan строка 2</tspan>
　　　　　　　　<tspan x="10" dy="15">tspan строка 3</tspan>
　　　　</text>
</svg>

Вот результат изображения:

Стиль элемента tspan

Элемент <tspan> можно использовать для отдельного настройки стиля элементов. Таким образом, вы можете использовать элемент <tspan> для настройки стиля текстового блока, чтобы он отличался от其余 текста. Вот пример:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　Вот результат изображения: <tspan style="font-weight: bold;">жирный</tspan> word.
</text></svg>

Вот результат изображения:

Надстрочные и подстрочные знаки базовой линии

Вы можете использовать CSS-свойство baseline-shift для создания надстрочных и подстрочных знаков с помощью элемента <tspan> . Это пример SVG baseline-shift, который показывает, как:

<svg width="500" height="100">　　　　
<text x="10" y="20">　　　　
Вот текст с <tspan style="baseline-shift: super;">верхний индекс</tspan>　　　　
Вот текст с <tspan style="baseline-shift: sub;">подстрочный индекс</tspan> смешанный с обычным　　　　
text.　　　　
</text>　　　　
</svg>

Это созданное изображение. (Обратите внимание: Firefox может не поддерживать)