我在一个大的SVG中有一个由六边形组成的大地图。我创建了这个函数，在这个函数中，当用户悬停在SVG上时，它向每个六边形添加一个事件侦听器，该事件侦听器执行一个函数，比较鼠标和每个六边形之间的距离，然后获取距离为30px的六边形，并向它们添加CSS样式，使它们根据鼠标位置按比例缩小大小。

这工作得很好，但当它在许多六边形上盘旋或增加距离检测时，它可能会变得相当波涛汹涌。当涉及到所有这些时，我是一个业余爱好者，所以我可能不知道更容易，也可能更优化的方法。

代码如下:

function hexagonHover() {
    for (i = 0; i < poly.length; i++) {
        poly[i].addEventListener('mouseover', function (event) {
            for (i = 0; i < poly.length; i++) {

                var pos = poly[i].getBoundingClientRect();

                let _x = Math.round(pos.left + pos.width / 2);
                let _y = Math.round(pos.top + pos.height / 2);
                
                var mouseX = Math.round(event.clientX);
                var mouseY = Math.round(event.clientY);

                var a = _x - mouseX;
                var b = _y - mouseY;

                var dist = Math.round(Math.sqrt(a * a + b * b));

                if (dist <= 30) {

                    let v = mapRange(dist, 0, 30, 1.2, 0.2);

                    poly[i].style.webkitTransform = poly[i].style.transform =
                        "scale(" + v + ")";
                    poly[i].style.webkitTransform = poly[i].style.transformOrigin =
                        "center";
                    poly[i].style.webkitTransform = poly[i].style.transformBox = "fill-box";
                    poly[i].style.transition = "transform ease 1s";
                } else {
                    poly[i].style.webkitTransform = poly[i].style.transform = "scale(1.0)";
                }
            }
        });
    }
}

这里有一个代码说明了这种影响，尽管规模要小得多

顺晟科技：