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或Edge中不起作用。

链接：

Answer 1

而不是查看点，获取svg的边界矩形

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

如何获得svg多边形的中心点？

1 个答案: