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

#css #svg

Есть SVG демка https://codepen.io/anon/pen/gxMJOJ

Все блоки, как положено разделены на группы , но текст описания, размещенный в
  не отображается:


  
  Текст 10
    



И ещё не нашёл информации как выравнивать текст внутри SVG-блока?
    

Ответы

Ответ 1

Теги  ...  можно добавлять в любое место svg кода.
Это своего рода поясняющий текст, в котором можно разместить, что
угодно, от комментарий до ссылок и всё это не будет видно
пользователю на дисплее, но поисковики, особенно Google хорошо
индексируют содержание в этих тегах.  
Теги  выступают в роли тултипа. Наведите курсор
на блок и должен появиться текст, который размещен в этих тегах.
Тоже индексируется. 
Текст добавляется в svg c помощью тегов  .... 
Внутри файла SVG позиционирование текста абсолютно при этом указывается координаты
X, Y начала текста. 
Ваш пример я прогнал через SVG оптимизатор для уменьшения кода и лучшего понимания. 







   

В svg нет автоматического переноса текста, как в Html поэтому приходится применять
относительное позиционирование с помощью тегов  .. , которые имеют атрибуты
dxи dy относительного смещения текста по координатам.  

 Текст 10
        Текст 10 
        Текст 10 
        Текст 10 
        Текст 10 
        Текст 10 
        


Позиционирование текста с помощью атрибута text-anchor