Позиционирование SVG и вертикальное выравнивание <text>

#css #svg

Есть SVG-файл:









Отображается так:



Как выровнять text строго по середине по вертикали? И  какие ещё существуют способы
позиционирования объектов в SVG файле?
    

Ответы

Ответ 1

Для вертикального выравнивания используйте dominant-baseline (поддерживается в Chrome,
Opera, Firefox):









Также можно выравниваться text атрибутом dy (поддерживается в Chrome, Opera, Firefox,
IE, Edge):







Ответ 2

какие существуют способы позиционирования объектов в SVG файле?


Способов позиционирования объектов svg внутри файла *.svg достаточно много.

В данном посте не рассматривается позиционирование с помощью правил CSS, только SVG    

#1 Позиционирование с помощью 

Создав в секции  любой объект svg, например круг, можно его в дальнейшем многократно
использовать с помощью команды , позиционируя клоны фигур координатами  x и y.    



 




#2 Позиционирование  preserveAspectRatio

Горизонтальное позиционирование    

Структура файла построена на вложении в родительский SVG дочерних svg со своими значениями
viewBox и preserveAspectRatio   


  
 
 




К большому сожалению этот способ работает только в Firefox - (((   

#5 Вариант работает во всех браузерах, включая IE11

В варианте #4 использовались  в файле SVG вложенные теги