Делаем SVG равной ширине <text>элемента внутри него

Question

В этой скрипке - https://jsfiddle.net/xtxd6r8t/ - у меня есть элемент <svg>, который содержит некоторый текст в теге <text>.Когда я проверяю <svg> и сверляю элемент <text>, я вижу, что его ширина равна общей длине копии.Однако элемент <svg> намного выше и шире.Есть ли способ заставить элемент <svg> брать его ширину и высоту от дочернего элемента <text>?

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text
  </text>
</svg>

Answer 1

Этот код поможет вам

var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);
svg.setAttribute("width", bbox.x + bbox.width  + "px");
svg.setAttribute("height",bbox.y + bbox.height + "px");

svg {
  background: green;
}

<svg xmlns="http://www.w3.org/2000/svg" class="image">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text SVG Colored Text
  </text>
</svg>

Я изменил вашу скрипку здесь