Страницы

Поиск по вопросам

вторник, 21 мая 2019 г.

Как добавить текст в SVG?

Есть SVG демка https://codepen.io/anon/pen/gxMJOJ
Все блоки, как положено разделены на группы , но текст описания, размещенный в не отображается:
Заголовок 10 Текст 10
И ещё не нашёл информации как выравнивать текст внутри SVG-блока?


Ответ

Теги ... можно добавлять в любое место svg кода. Это своего рода поясняющий текст, в котором можно разместить, что угодно, от комментарий до ссылок и всё это не будет видно пользователю на дисплее, но поисковики, особенно Google хорошо индексируют содержание в этих тегах. Теги ... выступают в роли тултипа. Наведите курсор на блок и должен появиться текст, который размещен в этих тегах. Тоже индексируется. Текст добавляется в svg c помощью тегов .... Внутри файла SVG позиционирование текста абсолютно при этом указывается координаты X, Y начала текста. Ваш пример я прогнал через SVG оптимизатор для уменьшения кода и лучшего понимания.
Заголовок 10 Текст 10 Заголовок 10 Текст 10 Текст 10 Текст 10 Текст 10 Текст 10 Текст 10 Заголовок 11 Текст 11 Заголовок 11 Текст 11 Текст 11 Текст 11 Текст 11 Заголовок 12 Текст 12 Заголовок 12 Текст 12 Текст 12 Текст 12 Текст 12
В svg нет автоматического переноса текста, как в Html поэтому приходится применять относительное позиционирование с помощью тегов .. , которые имеют атрибуты dxи dy относительного смещения текста по координатам.
Текст 10 Текст 10 Текст 10 Текст 10 Текст 10 Текст 10
Позиционирование текста с помощью атрибута text-anchor
Start middle End

Комментариев нет:

Отправить комментарий