Estoy tratando de poner números dentro de formas personalizadas. Estoy usando getBBox() para encontrar el centro de la forma. Solo funciona en ciertas formas, porque el punto central puede no estar dentro de una forma hueca.

Demostración en Codepen: https://codepen.io/arindamx01/pen/KKyLNrj?editors=1010
Aquí está mi código JavaScript:

 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); }); });

Intenté usar el método getBBox() pero no funciona para todas las formas.

En la imagen de arriba, el número 4 debe estar dentro de la forma de C hueca.