<text>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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 |
Совместимость с браузерами
BCD tables only load in the browser
Контекст использования
Категории | Графические элементы, Текстосодержащий элемент |
---|---|
Разрешённый контент | Символы и любое количество следующих элементов, в любом порядке: Элементы анимации Элементы описания Дочерние элементы с текстовым контентом <a> |