如何 link 我的 svg 图片 (raphael.js)

Question

我使用 raphael.js following Jonathan Petitcolas tutorial 创建了一个交互式地图。

他唯一跳过的部分是如何在地图内创建链接。我想为地图的每个部分设置一个目标，例如 href="example.html"

尽管如此，我如何才能将 data 添加到我可以使用 jQuery 定位的单个路径？我想创建一个包含 north west、south 等信息的鼠标悬停叠加层

JSFIDDLE DEMO – 我感谢每一个提示！

Answer 1

将您的 regions 更改为 objects 的数组，以包含 title 和 href 数据：

regions["yw-arnsberg"] = {href:"www.google.com", title: "mytitle", path: map.path("M 314.3,204.1c2.6-0.9,...")};

在 for (function (region) { 中添加处理标题的代码：

region.path.attr({title: region.title});

并添加 click 将处理 href 数据的侦听器：

region.path[0].addEventListener("click", function() {
    location.href = region.href;         
}, true);

(几乎) 工作 Fiddle: http://jsfiddle.net/zbr2rshe/4/ JSFiddle 不允许用 [= 保存任何 fiddle 19=] 所以这个 fiddle 不包含它。

How to link my svg images (raphael.js)