Как растянуть текст svg по всей ширине контейнера?

#html #css #svg

Растягивание самого SVG-элемента никак не помогает. Также пробовал добавить viewBox='50%
50% 100% 100%' и это не привело ни к каким результатам.



.wrapper {
  width: 600px;
  background-color: blue;
  height: 600px;
}

svg {
  width: 100%;
  height: 100%;
}

tspan {
  font-size: 30px;
  font-family: Helvetica;
}

  




    

Ответы

Ответ 1

Растягивание текста делается с помощью атрибутов textLength и lengthAdjust.



.wrapper {
  width: 600px;
  background-color: blue;
  height: 180px;
}

svg {
  width: 100%;
  height: 100%
}

text {
  font-size: 30px;
  font-family: Helvetica;
}

  





Смотрите также: Как растянуть текст по ширине блока div, где присутствует решение
через JS/JQ.


Ответ 2

Не вполне уверен, что понял вопрос. Такого решения будет достаточно? 



setTimeout(function() {
  $('svg').each(function() {
    var svg = $(this);
    var text = svg.find('text');
    var bbox = text.get(0).getBBox(); 

    svg.get(0).setAttribute('viewBox', 
                            [bbox.x,
                             bbox.y,
                             bbox.width,
                             bbox.height].join(' '));
  });
}, 100);
.wrapper {
  width: 600px;
  background-color: blue;
  height: 600px;
}

svg {
  display: block;
  width: 100%;
  max-height: 100%;
}

tspan {
  font-size: 30px;
  font-family: Helvetica;
}