Find center of svg shape

Question

Im using svgjs to create my shapes. How can I find the center point of an svg shape and add an element there? In my case a red dot. I can't find any information in the documentation for a method or something that helps in this situation.

Answer 1

You can use the method getBBox or alternatively getBoundingClientRect . Both methods give you an object with the properties x, y, width, height , which you can use to calculate your center.

Since you tagged your question with svg.js I will also give you a solution with svg.js .

// Vanilla
node = document.getElementById('myEl').getBBox()

// with svg.js
SVG.adopt(document.getElementById('myEl')).bbox()

The second solution gives you back an object which has cx and cy already calculated for you.

This method can be found in the docs