Aligning the objects in SVG center

Question

How can i align objects within svg tag center. I can make it aligned by adjusting the x,y cordiantes in viewbox. But every time i need to change the value according to the size

Answer 1

you can use getBBox() to get the size of your path, and then adjust your viewBox accordingly...

var box=path.getBBox()
svg.setAttribute("viewBox",`${box.x} ${box.y} ${box.width} ${box.height}`)

console.log(box)

svg{border:1px solid red}

P.S.: just do this once and change your viewBox manually in your code...