CODEWITHSUNDEEP
htmlcsssvg
finners
finners

Reputation: 885

Making SVG the equal width of <text> element within it

In this fiddle - https://jsfiddle.net/xtxd6r8t/ - I have an <svg> element which is housing some text within a <text> tag. When I inspect the <svg> and drill down the the <text> element I can see that its width is equal to the total length of the copy. However, the <svg> element is much taller and wider. Is there a way of making the <svg> element take it's width and height off the child <text> element?

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

Upvotes: 1

Views: 179

Answers (1)

Zuber
Zuber

Reputation: 3473

This code will help you

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>

i have modified your fiddle here

Upvotes: 1

Related Questions