Центрирование элемента <text> внутри <svg>

У меня есть текст, который я показываю:

    <div id = "fixed-target" style = "display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
      <svg width = "654" height = "83"> 
           <rect id = "rect1" x = "20" y = "59" width = "100%" height = "83px" fill = "transparent" stroke = "transparent"></rect>       
                <text text-anchor = "start" x = "150" y = "59" font-family = "Abbey" font-size = "60px" 
 style = "font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
           <tspan text-anchor = "start" dy = "15">Some test text</tspan>
         </text>                          
      </svg>      
    </div>

и я знаю, что для центрирования линии по горизонтали мне нужно увеличить параметр «x» текстового элемента. Но как мне вычислить, каким должно быть значение?

svg text

25.03.2018 19:27

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто используйте text-anchor = "middle" и x = "50%", чтобы центрировать текст.

    <div id = "fixed-target" style = "display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
      <svg width = "654" height = "83"> 
                <text text-anchor = "middle" x = "50%" y = "59" font-family = "Abbey" font-size = "60px" 
 style = "font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
           <tspan dy = "15">Some test text</tspan>
         </text>                          
      </svg>      
    </div>

Это отлично работает с одной строкой текста. Но если есть два блока (скопируйте и вставьте свой блок и сделайте строку в tspan длиннее), второй будет обрезан. Как вы обрабатываете несколько блоков?

— 25.03.2018 23:31

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

— 25.03.2018 23:34

Совершенно верно. stackoverflow.com/questions/49481269/…

— 25.03.2018 23:45

25.03.2018 19:34