<tspan>

Базовая поддержка Широко доступно *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015⁩ года.

* Некоторые части этой функции могут поддерживаться в разной степени.

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

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

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

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

Атрибуты

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

Интерфейс DOM

Этот элемент реализует интерфейс SVGTSpanElement.

Пример

<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>

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # TextElement>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`tspan`	1	12	1.5	9	3	18	4	14	2	1.0	3	2
`dx`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`dy`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`fill`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2
`lengthAdjust`	1	79	Нет	15	3	18	Нет	14	2	1.0	4.4	2
`rotate`	1	79	1.5	15	3	18	4	14	2	1.0	4.4	2
`systemLanguage`	1	12	12	9	3	18	14	14	2	1.0	3	2
`textLength`	1	12	Нет	15	3	18	Нет	14	2	1.0	4.4	2
`x`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`y`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2

См. также

white-space

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