如何为SVG六边形的每条边添加hover事件？

嘿，这个问题我之前也碰到过——单个<polygon>元素确实没法区分每条边的hover事件，因为它是一个整体图形，鼠标事件只会触发整个多边形的回调。不过有个很直观的解决办法，就是把六边形拆成6个独立的<line>元素，这样每条边都能单独监听hover状态了，我给你具体演示一下：

方法一：拆分六边形为独立线条元素 #

首先修改你的SVG代码，把原来的<polygon>替换成6条单独的<line>，每条对应六边形的一条边，同时给它们统一加个类名方便批量操作：

<svg width="500" height="500" id="svgTry">
  <!-- 六条独立的边，共享同一个类名 -->
  <line class="hex-edge" x1="150" y1="0" x2="285" y2="75" stroke="rgb(249, 249, 249)" stroke-width="20" />
  <line class="hex-edge" x1="285" y1="75" x2="285" y2="225" stroke="rgb(249, 249, 249)" stroke-width="20" />
  <line class="hex-edge" x1="285" y1="225" x2="150" y2="300" stroke="rgb(249, 249, 249)" stroke-width="20" />
  <line class="hex-edge" x1="150" y1="300" x2="15" y2="225" stroke="rgb(249, 249, 249)" stroke-width="20" />
  <line class="hex-edge" x1="15" y1="225" x2="15" y2="75" stroke="rgb(249, 249, 249)" stroke-width="20" />
  <line class="hex-edge" x1="15" y1="75" x2="150" y2="0" stroke="rgb(249, 249, 249)" stroke-width="20" />
</svg>

用JavaScript绑定Hover事件 #

现在每条边都是独立元素了，直接给类名绑定mouseenter和mouseleave事件就行：

$('.hex-edge')
  .on('mouseenter', function() {
    this.style.strokeWidth = '30'; // 鼠标移入时加宽线条
    console.log('Hovered on edge:', this);
  })
  .on('mouseleave', function() {
    this.style.strokeWidth = '20'; // 鼠标移出时恢复原宽度
  });

更简洁的CSS实现 #

如果不需要额外的JS逻辑，用CSS的:hover伪类就能搞定，还能加过渡动画让效果更丝滑：

.hex-edge {
  stroke: rgb(249, 249, 249);
  stroke-width: 20;
  transition: stroke-width 0.2s ease; /* 平滑过渡效果 */
}

.hex-edge:hover {
  stroke-width: 30;
}

方法二：不拆分元素的复杂方案（可选） #

如果实在不想拆分多边形，你需要通过数学计算判断鼠标当前在六边形的哪条边上：

• 监听整个多边形的mousemove事件
• 获取鼠标坐标，计算它到六边形每条边的距离
• 判断距离最近的边，再触发对应的hover逻辑

不过这个方法需要写不少几何计算代码，维护起来也麻烦，除非有特殊需求，不然还是推荐拆分线条的方案。

内容的提问来源于stack exchange，提问作者Chiyaan Suraj