I want to find the centroid of the circle I am drawing like this;
circle = document.querySelectorAll('circle');
console.log(circle.getBBox());<svg>
<circle class="donut-segment" data-per="30" cx="21" cy="21" r="15.91549430918954"
fill="transparent" stroke="#254C66" stroke-width="3" stroke-dasharray="50 50" stroke-dashoffset="75">
</circle>
</svg>I get the error: Property 'getBBox' does not exist on type NodeListOf<\SVGCircleElement>. Same goes with getBoundingClientRect. What am I doing wrong?
For one circle select selector querySelector('.donut-segment')
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="60" height="60" viewBox="0 0 30 30" >
<circle class="donut-segment" data-per="30" cx="21" cy="21" r="15.91549430918954"
fill="transparent" stroke="#254C66" stroke-width="3" stroke-dasharray="50 50" stroke-dashoffset="75">
</circle>
</svg>
<script>
circle = document.querySelector('.donut-segment');
let cord = circle.getBBox()
console.log(cord.x + cord.width /2)
console.log(cord.y + cord.height /2)
</script>