如何用JavaScript获取SVG图像中鼠标悬停的路径

嘿，我来帮你搞定这个鼠标悬停SVG地图区域的问题！你说每个path都有类似Scotland的ID和class，但之前的方法没生效，大概率是事件绑定的时机不对，或者SVG的加载方式导致元素选不到。下面给你两种最常用的解决方案，分情况来看：

情况1：SVG是内联在HTML中的（直接写在HTML里的

这是最简单的场景，直接用原生JS就能搞定：

// 等整个DOM加载完再执行，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有地图区域的path元素
  const mapRegions = document.querySelectorAll('svg path');
  
  // 给每个区域绑定悬停事件
  mapRegions.forEach(region => {
    // 鼠标移入时触发
    region.addEventListener('mouseover', function() {
      // 获取当前区域的ID（比如你的Scotland）
      const currentRegion = this.id;
      // 也可以用class：this.className
      
      // 这里写你要执行的对应操作，比如：
      console.log(`现在悬停在${currentRegion}区域`);
      // 临时改变填充色做视觉反馈
      this.setAttribute('fill', '#ff9900');
      
      // 针对不同区域写专属逻辑
      switch(currentRegion) {
        case 'Scotland':
          alert('欢迎来到苏格兰！');
          break;
        case 'England':
          // 英格兰的操作，比如显示对应信息
          document.getElementById('region-info').textContent = '英格兰是英国面积最大的地区';
          break;
        // 其他区域（威尔士、北爱尔兰）同理
      }
    });
    
    // 鼠标移出时恢复样式/状态
    region.addEventListener('mouseout', function() {
      // 恢复默认填充色
      this.setAttribute('fill', '#CCCCCC');
      // 清空信息（如果有的话）
      document.getElementById('region-info').textContent = '';
    });
  });
});

情况2：SVG是通过