Question

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

http://jsfiddle.net/dE9cK/

我在这里拍了一段我的raphael地图代码，以显示我如何启动并运行我的地图，完整的代码在上面的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，但我似乎无法通过路径获取它。
将小组路径放在一起（我已经将Alaska＆amp; USA作为我小提琴中的命名路径，想知道如果将这两个组合在一起，两者都被选中/激活时会被点击）。

真的很感激任何人都可以提供帮助。谢谢。

Answer 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

Raphael SVG Map - 添加class，id并选择单个路径

1 个答案: