Текст SVG
Описание элемента <text>
Элемент SVG <text> определяет графический элемент, используемый для отображения текста. К <text> можно применить узор, обрезающий путь, маску, градиент или фильтр, как и к другим графическим элементам SVG. Текст, не включённый в элемент <text>, не будет отображён. В то время как текст, включённый в элемент <text>, может отображаться с автоматическим переносом, в предварительно отформатированном виде или вдоль пути.
Текст SVG поддерживает такие типографские функции, как декорирование текста, выбор шрифта, а также использование факультативных, стилистических или исторических лигатур.
SVG также поддерживает потребности в международной обработке текста:
- текст слева направо или двунаправленный текст,
- вертикальная и горизонтальная ориентация текста,
- сложный макет текста,
- выравнивание глифов по различным базовым линиям.
Возможно создание многоязычного контента SVG путём подстановки различных текстовых строк в зависимости от предпочитаемого языка пользователя.
Для стилизации текста можно использовать специфичные для текста свойства CSS, такие как font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width и fill.
Пример элемента SVG <text>:
Пример элемента SVG <text>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" >
<text x="20" y="25" fill="purple">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Пример элемента SVG <text> с атрибутом rotate:
Пример элемента SVG <text> с атрибутом rotate
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="150" style="border:1px solid red">
<text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>В следующем примере элемент <text> используется вместе с элементом <tspan>, который может содержать различное форматирование и позицию.
Пример элемента SVG <text>, используемого с элементом <tspan>:
Пример элемента SVG <text>, используемого с элементом <tspan>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="450" height="150" style="border:1px solid #cccccc">
<text x="20" y="20" style="fill:green">
Example of the SVG "text" element used with the "tspan" element
<tspan x="25" y="65">This is a SVG text.</tspan>
<tspan x="35" y="90">This is a SVG text.</tspan>
<tspan x="45" y="115">This is a SVG text.</tspan>
</text>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Пример элемента SVG <text>, используемого с элементом <a>:
Пример элемента SVG <text>, используемого с элементом <a>:`
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="60" style="border:1px solid #cccccc">
<a href="https://www.w3docs.com/learn-html/svg-intro.html" target="_blank">
<text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
</a>
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Атрибуты
| Атрибут | Описание |
|---|---|
| x | Указывает начальную координату x базовой линии текста. |
| y | Указывает начальную координату y базовой линии текста. |
| dx | Указывает горизонтальный сдвиг позиции текста относительно предыдущей позиции. |
| dy | Указывает вертикальный сдвиг позиции текста относительно предыдущей позиции. |
| rotate | Указывает поворот ориентации для каждого отдельного глифа. |
| lengthAdjust | Указывает, как текст сжимается или растягивается для соответствия ширине, определённой атрибутом textLength. |
| textLength | Указывает ширину, в которую должен поместиться текст. |
| text-anchor | Указывает горизонтальное выравнивание текста. |
| dominant-baseline | Указывает вертикальное выравнивание текста. |
Элемент SVG <text> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Что можно сделать с помощью элемента SVG 'text' в HTML?