CODEWITHSUNDEEP
javascriptsvg
k.ken
k.ken

Reputation: 5413

SVG ViewBox Construction

I'm trying to copy an svg path from a properly displayed svg(svg1) with multiple path elements. I basically trying to copy one path by making a new svg element(svg2) and appending the path. But the problem I'm running into is that the path I copied over to svg2 is big and I would like to get it to its proper size when it was in svg1.

I have been trying to construct a new viewBox for this element because svg1 has a viewBox but I can't make use of it because the viewBox in svg1 is for multiple path elements not one. Any ideas on how I can fix this?

Upvotes: 0

Views: 90

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

I assume from the 'javascript' tag that you added that you are trying to do this from javascript?

I don't think there is a DOM function to do it, so you would need to loop through the coords in the "d" attribute yourself. if you can assume that there is no "a/A","v/V" or "h/H" path commands then reading each pair of X,Y coords and keeping track of the minimum and maximum X and Y. Then create your viewBox from those.

This will result in a viewBox that might be a little too big in some cases, but it will never be smaller than the true bounding box.

Upvotes: 1

Related Questions