基于JS的SVG地图：鼠标悬停时修改多路径状态

嘿，这个需求其实很好实现，核心思路就是把每个州的区域形状和对应的标签绑定在一起，让它们共享同一个状态标识，这样触发悬停事件时就能同时操作两者。下面是具体的实现步骤和代码示例：

1. 给元素添加关联标识 #

首先，在创建区域（regions）和标签（labels）的Raphael元素时，给它们添加一个共同的自定义数据属性（比如state），值为州的缩写（比如你的示例里的PA）。这样我们就能通过这个标识快速找到对应的配对元素。

假设你的regions和labels数组是类似这样的结构（以PA为例）：

const regions = [
  { state: 'PA', path: 'M...' }, // 宾夕法尼亚州的形状路径
  // 其他州的区域数据...
];

const labels = [
  { state: 'PA', path: 'M...' }, // 宾夕法尼亚州标签的路径
  // 其他州的标签数据...
];

创建元素时绑定标识：

// 创建区域元素并绑定state标识
const regionElements = regions.map(region => {
  return paper.path(region.path)
    .attr({ fill: '#cccccc', stroke: '#ffffff', strokeWidth: 1 }) // 初始样式
    .data('state', region.state); // 存储州缩写作为关联标识
});

// 优化：把标签元素转成以state为key的对象，方便快速查找
const labelElementMap = {};
labels.forEach(label => {
  const labelEl = paper.path(label.path)
    .attr({ fill: '#333333', stroke: 'none' }) // 初始标签样式
    .data('state', label.state);
  labelElementMap[label.state] = labelEl;
});

2. 编写悬停事件的统一处理函数 #

接下来写两个回调函数，分别处理鼠标移入和移出的逻辑，通过之前绑定的state标识找到对应的标签元素，同步修改两者的样式：

// 鼠标移入时的样式变化
function onRegionHoverIn() {
  const currentState = this.data('state');
  // 修改当前区域的样式
  this.attr({ fill: '#e74c3c' }); // 换成你想要的悬停颜色
  // 找到对应的标签并修改样式
  const correspondingLabel = labelElementMap[currentState];
  if (correspondingLabel) {
    correspondingLabel.attr({ fill: '#ffffff' }); // 标签悬停颜色
  }
}

// 鼠标移出时恢复初始样式
function onRegionHoverOut() {
  const currentState = this.data('state');
  this.attr({ fill: '#cccccc' }); // 恢复区域初始颜色
  const correspondingLabel = labelElementMap[currentState];
  if (correspondingLabel) {
    correspondingLabel.attr({ fill: '#333333' }); // 恢复标签初始颜色
  }
}

3. 给所有区域元素绑定悬停事件 #

最后，把上面的回调函数绑定到每个区域元素的hover事件上：

regionElements.forEach(regionEl => {
  regionEl.hover(onRegionHoverIn, onRegionHoverOut);
});

这样一来，当你鼠标悬停在某个州的形状上时，该州的区域和对应的标签就会同时改变样式啦～如果需要扩展其他交互（比如点击事件），也可以用同样的思路，通过state标识关联操作多个元素。

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