Raphael SVG Map - 添加类、ID 并选择单独的路径答案

【问题标题】：Raphael SVG Map - Add class, id and select individual pathsRaphael SVG Map - 添加类、ID 并选择单独的路径
【发布时间】：2014-05-31 01:06:03
【问题描述】：

我有一个完美绘制的 SVG 地图，并且我有一些（平均）代码提供了 mouseOver、onClick 和 mouseOut 状态。在我完成的页面中，我需要能够单击地图上的不同国家，并在其下方的表格中显示与该国家相关的数据。（省略了数据表条目，我已经在本地服务器上运行了那个位）。

http://jsfiddle.net/dE9cK/

我在这里获取了我的 raphael-map 代码的 sn-p 以显示我如何启动和运行我的地图，完整的代码在上面的 jsfiddle 中：

var rsr = Raphael('SVGmap', '679', '350');

var layer1 = rsr.set();
var path6251 = rsr.path("M-289.826-562.781c-2.617-0.95-3.363-1.923-2.737-3.568c0.506-1.331,2.102-1.962,2.102-0.831   c0,0.303,0.547,1.292,1.216,2.197C-286.882-561.785-286.9-561.718-289.826-562.781z").attr({id: 'path6251',fill: '#909155',label: 'Ebene 1',groupmode: 'layer',parent: 'layer1','stroke-width': '0','stroke-opacity': '1'}).transform("t470,892.401").data('id', 'path6251');

var rsrGroups = [layer1];
layer1.push(
    path6251 
);

我需要帮助的是：

为每个路径添加一个唯一的 ID/名称，一旦它被制定（使我能够针对数据表的每个单独的路径 - 如果这是当前路径名称更喜欢它，以便更容易引用 - 我完成并开始工作后，我正在整理所有路径名。

每个路径在我的 JS 文件中都有一个数据 ID，但我似乎无法通过该路径获取它。
将路径组合在一起（我将阿拉斯加和美国作为我的小提琴中的命名路径，想知道如何将这两个组合在一起，以便在单击任何一个时都变为选中/激活）。

非常感谢任何人可以提供的任何帮助。谢谢。

【问题讨论】：

标签： svg raphael

【解决方案1】：

您可以使用node 属性来获取元素并将id 设置为如下所示

path6251.node.id = 'p6251';
使用set()方法对元素进行分组并对集合执行操作。

示例代码

var group1 = rsr.set();
group1.push(path1);
group1.push(path2);
group1.attr({fill: 'red'}); //will change color of both path1 and path2

【讨论】：