Текст SVG – элемент SVG text, SVG textPath

SVG позволяет создавать три типа графических объектов: векторные графические фигуры, изображения и текст. Точно так же, как и к фигурам, к текстовым элементам SVG можно применять преобразования системы координат, обрезку и стилизацию. В этой статье мы рассмотрим, как перенести текст в SVG-изображение.

В этой статье представлены текстовые элементы SVG, такие как <text>, <tspan> и <textPath>, а также рассматриваются некоторые общие атрибуты, которые помогают отображать, форматировать и стилизовать текст в изображении SVG. С помощью подробных примеров и объяснений вы узнаете, как управлять размещением, ориентацией и внешним видом текста. В статье также представлена основная информация о глифах, символах и шрифтах.

Шрифты и глифы

Говоря о тексте SVG, полезно знать, что такое глифы, символы и шрифты.

Глиф (Glyph) – это элементарная графическая единица из согласованного набора единиц, предназначенная для написания шрифтовых символов. Ссылаясь на официальную спецификацию на W3.org:

“A glyph represents a unit of rendered content within a font. Typically, a glyph is defined by one or more shapes such as a path, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes”.

Другими словами, глифы используются как набор графических путей (кривых) для построения букв или символов.

Шрифт (Font) – это блок данных (или файл), состоящий из описаний отдельных символов из набора, используемого программой при отображении текста. С другой стороны, шрифт представляет собой организованную коллекцию графически связанных глифов, в которой различные представления глифов будут иметь определенный внешний вид или стиль, характерный для данного шрифта.

В векторных шрифтах используются контуры, кривые Безье, инструкции по рисованию и математические формулы для описания каждого глифа, благодаря чему контуры символов можно масштабировать до любого размера.

Символ (Character) – абстрактный кодовый пункт (например, Unicode), который программа сопоставляет глифу в шрифте. Символы располагаются вдоль воображаемой базовой линии, которая может быть горизонтальной или вертикальной в зависимости от сценария.

Понимание взаимосвязи между символами, глифами и шрифтами необходимо, когда требуется точный контроль над отображением текста SVG.

Элементы текстового содержимого SVG

SVG определяет три элемента содержимого, которые генерируют видимый текст:

Элемент	Назначение
`<text>`	Определяет блок текста.
`<tspan>`	Обеспечивает детальное позиционирование и стилизацию внутри `<text>`.
`<textPath>`	Выравнивает текст вдоль кривой `<path>`.

SVG `text` элемент

Элемент <text> используется для определения текста. x и y – основные атрибуты, отвечающие за положение текста. Базовая линия текста начинается с нижнего левого угла первого текстового символа. Важно установить значение y больше размера шрифта. В противном случае текст не попадет во вьюпорт. В следующем примере показано, как правильно указать начало базовой линии. x и y задают координаты начала базовой линии ( svg-text-position.svg).

1<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
2    <text x="10" y="6" fill="red">The text is not fully visible </text>
3    <text x="10" y="30" fill="green">The text is fully visible </text>
4</svg>

Атрибуты элементов <text> и <tspan> указывают направление письма, выравнивание, шрифт и другие определяющие свойства и функции, которые точно описывают, как отображать символы. Основными атрибутами являются:

x, y – абсолютные координаты начала базовой линии.
dx, dy – относительные сдвиги для отдельных символов.
rotate – угол поворота, применяемый к каждому символу.
textLength – заставляет отрисованный текст занимать заданную длину.
lengthAdjust – управляет тем, как расстояние и масштаб глифов адаптируются к textLength (spacing, spacingAndGlyphs).
text-anchor – выравнивание текста относительно координаты x (start, middle, end).
writing-mode – задаёт направление текста (lr, rl, tb, bt).

Эти атрибуты можно комбинировать для создания сложных макетов, таких как растянутый текст, сценарии справа налево или вертикальная запись.

Две строки SVG текста – одна не помещается в окне просмотра, а другая помещается.

Давайте посмотрим, как можно расположить текст ( svg-text-arranging.svg):

1 <svg  height="300" width="400" xmlns="http://www.w3.org/2000/svg">
2    <text x="180" y="30" fill="red">Aspose.SVG</text>
3    <text x="180" y="60" fill="blue" textLength="140" >Aspose.SVG</text>
4    <text x="180" y="90" fill="grey" textLength="160" lengthAdjust="spacingAndGlyphs" style="direction: rtl; unicode-bidi: bidi-override">Aspose.SVG</text>
5    <text x="180" y="120" fill="green" style="text-anchor: middle" >Aspose.SVG</text>
6    <text x="260" y="90" style="writing-mode: tb">Aspose.SVG</text>
7</svg>

Пять строк одинакового текста, которые отличаются положением, ориентацией текста и длиной.

Текст красный использует значение по умолчанию text-anchor:start.
Текст зелёный центрирует текст с помощью text-anchor:middle.
Текст серый демонстрирует направление справа налево с использованием direction:rtl.
Тексты синий и серый показывают, как textLength и lengthAdjust растягивают глифы.
Вертикальный текст использует writing-mode:tb (сверху вниз).

SVG `tspan` элемент – Встроенное стилизование и разрывы строк

Элемент <tspan> находится внутри элемента <text> или другого элемента <tspan>. Будучи дочерним элементом, <tspan> выполняет несколько важных функций при отображении и форматировании текста:

В SVG текст рендерится как одна строка внутри viewport; автоматический перенос не происходит. Вы можете разбить его на несколько строк, используя элемент <tspan>. Каждый <tspan> может иметь собственное форматирование и позицию.
Для применения стилей (или других атрибутов) только к определённой части текста необходимо использовать элемент <tspan>. Он позволяет менять стиль или позицию отображаемого текста внутри <tspan> относительно родительского элемента.

Рассмотрим простой пример <tspan>> ( svg-text.svg):

1 <svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
2    <text x="20" y="60" style="font-family:arial">
3        <tspan style="font-weight:bold; font-size:55px">ASPOSE</tspan>
4        <tspan x="50" y="90" style="font-size:20px; fill:grey">Your File Format APIs </tspan>
5    </text>
6</svg>

Текст в качестве API вашего формата файла

x и y на <tspan> начинают новую строку в указанных координатах.
Свойства style в строке (например, font-weight, font-size, fill) воздействуют только на данный <tspan>.

SVG `<textPath>` – Текст вдоль кривой

В SVG текст можно отображать не только по горизонтали или вертикали, но и вдоль любой векторной кривой. SVG может размещать текст по пути, определенному элементом <path>. Это делается с помощью элемента <textPath> несколькими способами:

Атрибут href (xlink:href) ссылается на URL-адрес, указывающий на элемент <path>.
Атрибут path напрямую указывает данные пути SVG.

И атрибут path, и атрибут href указывают путь, по которому будут отображаться символы. Текст, отображаемый вдоль кривой, в основном принимает атрибут href со ссылкой на элемент <path>. Вот пример ( svg-text-path.svg):

 1<svg height="300" width="800" xmlns="http://www.w3.org/2000/svg">
 2    <path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100"  fill="transparent" />
 3    <path id="my_path2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent" />
 4    <text>
 5        <textPath href ="#my_path1">  Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications. 
 6        </textPath>
 7        <textPath href ="#my_path2">  Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications. 
 8        </textPath>
 9    </text>
10</svg>

Текст SVG расположенный вдоль SVG пути

Если длина пути короче размера текста, то рисуется только та часть текста, которая находится в пределах пути. На рисунке вторая кривая короче длины текста, поэтому текст обрывается в конце пути.

Текст SVG можно стилизовать с помощью свойств CSS, например font-weight, font-style, text-decoration, text-transform и т. д. Его можно декорировать подчеркиванием, надчеркиванием и зачеркиванием. Как и другие фигуры SVG, текст может иметь как обводку, так и заливку. Подробнее о стилизации текста можно прочитать в разделе Фильтры и градиенты SVG.

Распространённые ошибки и решения

Проблема	Причина	Решение
Текст обрезан в верхней части viewport	Значение `y` меньше размера шрифта	Установите `y` больше размера шрифта (например, `y="30"` для текста высотой 24 px).
Текст не следует кривой как ожидается	`href` указывает на несуществующий ID `<path>`	Проверьте `id` элемента `<path>` и убедитесь, что значение `href` точно совпадает.
Глифы выглядят искажёнными	`lengthAdjust` установлен в `spacing` при использовании `textLength`	Используйте `lengthAdjust="spacingAndGlyphs"` для масштабирования как расстояния, так и глифов.
Текст справа налево всё ещё отображается слева направо	Отсутствует `unicode-bidi:bidi-override`	Добавьте `style="direction: rtl; unicode-bidi: bidi-override"` к `<text>` или `<tspan>`.
Текст не переходит на новую строку	Ожидание автоматического переноса	Вставьте новый `<tspan>` с собственными координатами `x`/`y` для каждой строки.

Быстрые рецепты

Цель	SVG‑фрагмент (копировать‑вставить)
Центрировать текст по горизонтали	`<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Centered</text>`
Вертикальный текст (сверху вниз)	`<text x="20" y="20" writing-mode="tb">Vertical</text>`
Растянуть текст до точной ширины	`<text x="10" y="40" textLength="200" lengthAdjust="spacingAndGlyphs">Stretch me</text>`
Разместить текст по кривой	`<path id="curve" d="M10,80 C40,10 65,10 95,80" fill="none"/> <text><textPath href="#curve">On a curve</textPath></text>`
Применить подчёркивание и надчеркивание	`<text x="10" y="40" style="text-decoration: underline overline;">Styled</text>`

Заключение

Текстовые элементы SVG, включая <text>, <tspan> и <textPath>, являются фундаментальными компонентами SVG, используемыми для визуализации текста в графике SVG. Элемент <text> определяет блок текста, а элементы <tspan> позволяют более точно контролировать стиль и размещение текста внутри <text>. Кроме того, элементы <textPath> позволяют тексту следовать по указанному пути. С помощью текста SVG вы можете создавать динамичную и визуально привлекательную графику, повышая интерактивность и удобство использования документов SVG.

Связанные статьи

В статье Редактирование файла SVG вы узнаете, как редактировать SVG с помощью библиотеки Aspose.SVG for .NET, а также рассмотрите подробные примеры C# того, как добавлять элементы в документ SVG и редактировать их.
В статье Element Builders – Конструкторы SVG элементов вы узнаете, как программно создавать и редактировать SVG элементы на C# с помощью Aspose.SVG Builder API. Вы также увидите, насколько эффективен SVG Builder и как он упрощает программирование SVG.
В статье Path Builder – Создать SVG путь – C# демонстрируется интуитивно понятный синтаксис для программного определения путей SVG, включая расположение текста вдоль пути.