如何动态缩放svg多边形以适合24X 24尺寸？

Question

My sample code is

<svg width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMinYMin"
                                 xmlns="http://www.w3.org/2000/svg">
                                <polygon points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"/>
                    </svg>

the polygon points will be loaded from service and i want to resize and scale the polygon to fit into 24 x 24 area.

Thanks in advance

Answer 1

You need to use the values from the getBBox() function and update your viewBox with those.

 var myPath = document.getElementById("p1") var mySvg = document.getElementById("s1") var b = myPath.getBBox(); mySvg.setAttribute("viewBox", [bx, by, b.width, b.height].join(" ")); 

 <svg width="24" height="24" id="s1"> <polygon id="p1" points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"/> </svg> 

Answer 2

As your points are dynamic. You can dynamically calculate the polygon dimension to set the height and width of viewport

 var myPath = document.getElementById("p1") var w = myPath.getBoundingClientRect().width; var h = myPath.getBoundingClientRect().height; document.getElementById("s1").setAttribute("viewBox", "0 0 " + h + " " + w); 

 <svg width="24" height="24" id="s1" xmlns="http://www.w3.org/2000/svg"> <polygon id="p1" points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"/> </svg>