<tspan>

Элемент SVG <tspan> определяет подтекст внутри элемента <text> или другого элемента <tspan>. Он позволяет по мере необходимости настраивать стиль и/или положение этого подтекста.

Примечание: Элемент <tspan> по умолчанию не переносит текст на новую строку, для этого его необходимо стилизовать с помощью свойства CSS white-space.

Пример

html

<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      font: italic 12px serif;
    }
    tspan {
      font: bold 10px sans-serif;
      fill: red;
    }
  </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>

Атрибуты

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> ; Значение по умолчанию: нет; Анимируемо: да

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

Категории	Элемент текстового содержимого, дочерний элемент текстового содержимого
Разрешенное содержимое	Данные символов и любое количество следующих элементов в любом порядке: Дескриптивные элементы `<a>`, `<animate>`, `<set>`, `<tref>`, `<tspan>`

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

Спецификация
Scalable Vector Graphics (SVG) 2 # TextElement

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

	Рабочий стол					Мобильное устройство
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`tspan`	1	12	1.5	9	3	18	4	14	2	1.0	3
`dx`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`dy`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`fill`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`lengthAdjust`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`rotate`	1	≤79	1.5	15	3	18	4	14	2	1.0	4.4
`systemLanguage`	1	12	12	9	3	18	14	14	2	1.0	3
`textLength`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`x`	1	12	1.5	15	3	18	4	14	2	1.0	4.4
`y`	1	12	1.5	15	3	18	4	14	2	1.0	4.4

См. также

white-space

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan