Вертикальный центр Многострочный текст SVG

Question

Может ли кто-нибудь дать мне пример о том, как вертикально центрировать многострочный текст в SVG? Я googled, и я вижу много ссылок на alignment-baseline и dominant-baselin e, но нет конкретного примера для меня, чтобы посмотреть.

Например, в следующем SVG элемент TEXT заблокирован его верхним левым углом. Текст начинает появляться после этой позиции y. Что мне нужно сделать, если бы я хотел, чтобы текст был равномерно распределен выше и ниже этой позиции?

<text x="110" y="50" dy="0"> 
    <tspan dy="0em" x="110" style="font-weight: bold; fill: rgb(74, 76, 77);"> 
    <tspan x="110" dy="0em">This is my long quotation that will now wrap</tspan> 
    <tspan x="110" dy="1.1em">over multiple lines, maybe even two lines!</tspan> 
    <tspan x="110" dy="1.1em">Isn't that amazing?</tspan> 
    </tspan> 
    <tspan dy="1.5em" x="110" style="font-style: italic;"> 
    Speaker, Speaker Description 
    </tspan> 
</text> 

(я генерации это через D3, если это помогает)

Answer 1

Вы не можете действительно сделать автоматическое центрирование с SVG. SVG не имеет надлежащей автоматической компоновки.

Вы можете использовать dy, как и вы, чтобы разместить текст относительно базовой линии. Помните, что dy также может быть отрицательным.

<svg width="400" height="150"> 
 

 
    <line x1="110" y1="50" x2="400" y2="50" stroke="red"/> 
 
    <text x="110" y="50"> 
 
    <tspan x="110" dy="-0.8em">This is my long quotation that will now wrap</tspan> 
 
    <tspan x="110" dy="1.1em">over multiple lines, maybe even two lines!</tspan> 
 
    <tspan x="110" dy="1.1em">Isn't that amazing?</tspan> 
 
    </text> 
 

 
</svg>

Другая вещь, которую вы можете сделать, это использовать <foreignObject> элемент вставлять HTML в вашем SVG. Очевидно, что это работает только в браузерах.