I am trying to put numbers inside custom shapes. I am using getBBox() to find center of the shape. It works only on certain shapes, because center point may not be inside a hollow shape.

Demo on Codepen: https://codepen.io/arindamx01/pen/KKyLNrj?editors=1010
Here is my JavaScript code:

    let colorGroup = ['#700843', '#E95C87', '#AED9C5', '#FDFCFD', '#F8AF3F'];
    colorGroup.forEach( function(e, i) { 
    console.log(e, i);
    $(`path[data-color-group = "${e}"]`).each(function(){
        let pathBBox = $(this)[0].getBBox();
        console.log(pathBBox, $(this)[0])
        let getPathData = $(this).attr("data-index");

        var svgNS = "http://www.w3.org/2000/svg";
        var newText = document.createElementNS(svgNS,"text");
        newText.setAttributeNS(null,"x", pathBBox.x + pathBBox.width/2);     
        newText.setAttributeNS(null,"y", pathBBox.y + pathBBox.height/2);                    
        newText.setAttributeNS(null,"font-size","10");
        var textNode = document.createTextNode(i+1);
        newText.appendChild(textNode);
        document.getElementById("myIdInfo").appendChild(newText); 
    });
});

I tried using getBBox() method but it is not working for all shapes.

In above image, the number 4 should be inside the hollow C shape.