svg 다각형의 중심점을 얻는 방법?

Question

SVG 이미지가 있고 텍스트를 그리기 위해 모든 다각형의 중심점을 가져와야합니다.

function calculateCenterPoint(areas) { 
var maxX = 0, 
     minX = Infinity, 
     maxY = 0, 
     minY = Infinity; 
Array.prototype.forEach.call(areas, function (e) { 
    var i = 0, 
      coords = e.getAttribute('points').split(','); 
    while (i < coords.length) { 
     var x = parseInt(coords[i++], 10), 
       y = parseInt(coords[i++], 10); 
     if (x < minX) 
      minX = x; 
     if (x > maxX) 
      maxX = x; 

     if (y < minY) 
      minY = y; 
     if (y > maxY) 
      maxY = y; 
    } 
}); 
return { 
    x: minX + (maxX - minX)/2, 
    y: minY + (maxY - minY)/2 
}; } 

을하지만, IE 11, 또는 가장자리에서 작동하지 않습니다 : 나는 아래 스크립트를 사용하여이 작업을 수행하려합니다.

링크 :

• http://istra46760.tmweb.ru/poselki/ushakovskie-dachi.html
• https://gyazo.com/ba906bde72e5394c8a0275281108663b

Answer 1

대신 포인트보고의, SVG의 경계 RECT를 얻을 수

const el = document.querySelector("path"); 
const bbox = el.getBoundingClientRect(); 
const center = { 
    x: bbox.left + bbox.width/2, 
    y: bbox.top + bbox.height/2 
}; 

또는

을 할 수

const bbox = el.getBBox();