<text>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
SVG элемент <text> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <text> можно применить градиент, шаблон, окантовку, маску или фильтр.
Текст не будет отображаться, если он не находится внутри SVG элемента <text>. Это отличается от сокрытия по умолчанию, поскольку установка свойства display не отображает текст.
Пример
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* Обратите внимание, что цвет текста задаётся с помощью * * fill свойства, а свойство color используется только для HTML */ .Rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">Мой</text> <text x="60" y="35" class="heavy">кот</text> <text x="60" y="55" class="small">очень</text> <text x="100" y="55" class="Rrrrr">Сердит!</text> </svg> Атрибуты
Интерфейс DOM
Этот элемент реализует интерфейс SVGTextElement.
Примеры
Основы использования элемента <text>
SVG
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"> <style> .mal { font: italic 16px sans-serif; } .hey { font: bold 26px sans-serif; fill: #6de; } </style> <text x="0" y="68" class="mal">- Привет,</text> <text x="110" y="40" class="hey">Сахалин!</text> </svg> Результат
Изменение направления написания текста
Направление написания SVG-текста можно сменить на обратное, применив трансформацию.
SVG
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <style> .mal { font: italic 16px sans-serif; transform: rotate(180, 50, 50); } .hey { font: bold 26px sans-serif; fill: #6de; } </style> <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)"> Пример ротации </text> <text x="180" y="40" class="hey">SVG-текста.</text> </svg> Результат
Цвет текста
Цвет текста в SVG-элементе <text> может быть изменён посредством свойства fill="[color]" внутри элемента <text>.
SVG
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <style> .gri { font: italic 16px sans-serif; fill: #6dd; } .red { font: bold 26px sans-serif; fill: #d66; } </style> <text class="gri" x="10" y="30">Цвет текста</text> <text class="red" x="120" y="30">SVG.</text> </svg> Результат
Применение CSS-стилей к содержимому элемента <text>
Содержимое SVG элемента <text> может быть стилизовано как обычный текст в HTML.
SVG
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <style> .stil { font: italic 16px sans-serif; } .list { font: bold 26px sans-serif; } </style> <text class="stil" x="10" y="30">Стиль текста</text> <text class="list" x="140" y="30">SVG.</text> </svg> Результат
Спецификации
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TextElement |
Таблица составлена по информации из этого источника.
Совместимость с браузерами
Контекст использования
| Категории | Графические элементы, Текстосодержащий элемент |
|---|---|
| Разрешённый контент | Символы и любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Дочерние элементы с текстовым контентом <a> |