Raphael中如何编辑通过Set分组的路径集合的样式？

哈哈，这个坑我之前刚踩过！你遇到的问题本质是混淆了Raphael封装的元素对象和原生DOM节点，咱们一步步理清楚：

为什么会报错？ #

你用R.set()创建的group1是Raphael的集合对象，里面的group1[0]是Raphael封装的路径元素，不是浏览器原生的DOM节点——而.style是原生DOM元素的专属属性，所以直接访问肯定会报undefined。

两种正确的解决方式 #

方式1：用Raphael原生的attr()方法（推荐）

Raphael的Set集合支持直接调用attr()方法，会自动把样式应用到集合里的所有元素，包括cursor这种交互样式，代码非常简洁：

var group1 = R.set();
group1.push(path1);
group1.push(path2);
group1.attr({
  fill: 'red',
  cursor: 'pointer' // 直接在这里设置cursor，整个分组的路径都会生效
});

这种方式的好处是跨浏览器兼容，而且Raphael会帮你处理所有元素的样式同步，不用手动遍历。

方式2：遍历Set获取原生DOM节点操作

如果你一定要用原生DOM的.style属性，那需要通过Raphael元素的.node属性拿到对应的DOM节点，再遍历Set里的每个元素设置：

var group1 = R.set();
group1.push(path1);
group1.push(path2);
group1.attr({fill: 'red'});

// 遍历Set里的每个元素，设置原生DOM样式
group1.forEach(function(el) {
  el.node.style.cursor = 'pointer';
});

额外小贴士：分组元素的交互事件 #

既然是多路径组成的国家，你肯定还要处理hover、点击这类交互——直接把事件绑定在Set上就可以，Raphael会自动把事件委托给集合里的所有元素，比如hover变色：

group1.hover(
  function() {
    this.attr({fill: 'orange'}); // hover时的样式
  },
  function() {
    this.attr({fill: 'red'}); // 离开时的样式
  }
);

这样不管鼠标移到这个国家的哪条路径上，都会触发统一的样式变化，完美解决标签冲突的问题～

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