如何在raphael.js中识别单个六边形路径对象并实现点击交互？

一、给Raphael元素正确设置ID #

Raphael绘制的图形是封装后的对象，直接给对象赋值id属性不会生效，需要操作其底层DOM节点：

// 循环创建六边形时，给每个元素设置唯一ID
var hex = paper.path(hexPath); // hexPath为你的六边形路径字符串
hex.node.setAttribute('id', 'hex-' + i); // i是循环索引，保证ID唯一

二、绑定点击/悬停事件，直接识别目标元素 #

不用去遍历SVG子元素，创建六边形时直接绑定事件，事件回调里的this就是当前交互的对象：

// 悬停事件
hex.hover(
  function() {
    // 这里的this就是当前悬停的六边形
    console.log('当前悬停坐标:', this.data('coords')); // 提前存入的坐标数据
  },
  function() {
    // 鼠标离开时的操作
  }
);

// 点击事件
hex.click(function() {
  // 获取当前六边形的属性与自定义数据
  var hexData = this.data('coords');
  var hexStyle = this.attr();
  // 调用生成放大版的函数
  createEnlargedHex(hexData, hexStyle);
});

// 创建六边形时存入自定义数据（比如坐标）
hex.data('coords', {x: xPos, y: yPos});

三、批量获取Paper内的所有元素（如果需要） #

如果要统计或批量处理所有六边形，直接用Raphael提供的paper.items集合，它包含了当前Paper上的所有元素：

// 获取元素总数
var totalElements = paper.items.length;
console.log('SVG内元素总数:', totalElements);

// 遍历筛选六边形
paper.items.forEach(function(item) {
  // 通过自定义数据判断是否为六边形
  if (item.data('isHex')) {
    console.log('六边形ID:', item.node.id);
  }
});

// 创建时标记六边形
hex.data('isHex', true);

四、点击后生成放大版六边形到目标DIV #

在点击回调中拿到目标六边形的属性后，在指定DIV中创建放大版本：

function createEnlargedHex(coords, style) {
  var targetContainer = document.getElementById('hex-enlarge-box');
  // 清空容器原有内容
  targetContainer.innerHTML = '';
  
  // 创建新的Raphael实例，设置足够大的画布
  var bigPaper = Raphael(targetContainer, 400, 400);
  // 复制原六边形路径，按比例放大
  var scale = 3; // 放大3倍
  var bigHex = bigPaper.path(style.path)
    .scale(scale, scale, 200, 200) // 以画布中心为基准放大
    .attr({
      fill: style.fill,
      stroke: style.stroke,
      'stroke-width': style['stroke-width'] * scale
    });
  
  // 添加标题提示
  bigHex.node.setAttribute('title', `坐标: ${coords.x}, ${coords.y}`);
}

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