如何使用 SVG 地图形状制作可点击的链接答案

【问题标题】：how to make clickable link with SVG map shapes如何使用 SVG 地图形状制作可点击的链接
【发布时间】：2014-10-07 18:29:51
【问题描述】：

因此，我正在创建美国的交互式地图，单击某个州后，我的网站会将您带到该州的静态页面（本例为阿拉斯加）。我的问题是如何围绕这个包裹一个锚标签？这是我拥有的一种状态的示例。所有其他州都遵循相同的模式/结构。我以前从来没有处理过这个问题，因为这是我第一次使用 SVG，所以任何建议/指针都会很棒！

<g id="states">
      <g>
        <!-- Alaska -->
        <path id="map_1" fill="#EBECED" stroke="#FFFFFF" stroke-width="1" d="M336.6,199.5l-0.199,0.4l0.5,1.1l-3.301,32.399l0.9,17.5c1.6-0.399,2.4-0.699,2.4-1
        c-0.301-0.6-0.4-1.1-0.301-1.5c0.101-1.5,0.5-1.899,1.101-1.3c0.6,0.5,1,1.4,1.399,2.7c0.301,1.3,0.801,1.9,1.5,1.6
        c0.301-0.199,1-0.5,1.9-0.8c0.6-0.8,0.8-1.399,0.6-1.8c-0.3-0.5-0.3-1.1,0-1.7c0.301-0.7,0-1.2-0.8-1.5
        c-0.899-0.399-1.2-1.2-0.6-2.3h22.5c-0.4-1.6-0.601-2.7-0.3-3.3c0.199-0.7,0.199-2-0.301-3.8c-0.199-0.801-0.199-1.2-0.3-1.301
        c0-0.1,0.101-0.6,0.3-1.6c0.101-0.6,0.4-1.2,0.9-2c0.4-0.5,0.6-1.1,0.4-1.8c-0.101-0.7-0.5-1.5-0.9-2.4
        c-0.5-0.899-0.8-1.7-0.9-2.2l-3.8-25.399H336.6z"/>
      </g>

【问题讨论】：

这不是关于站外库，它只是想知道如何将链接插入 SVG。我不明白关闭。
另外，您可以在 SVG 中使用 HTML 链接。只需将整个组包裹在一起即可。
我实际上已经完成了你正在做的事情。如果您通过 vshuiqog@sharklasers.com 给我发电子邮件，我会给您一个该解决方案的链接。我不想在此处添加链接，否则可能会被视为垃圾邮件。
用<a xlink:href="<wherever you want to go to>">替换没有id属性的<g>元素，用</a>替换</g>
@RobertLongson Nice solution!

标签： javascript html css svg interactive

【解决方案1】：

将没有 id 属性的<g> 元素替换为<a xlink:href="<wherever you want to go to>">，并将</g> 替换为</a>，这会将形状变成可用作链接的东西。

【讨论】：

【解决方案2】：

这很容易，最好使用 Javascript 和 jQuery

为路径标签赋予属性 data-state="name_of_state" 和 data-url="your_link"

$('path').click(function () {
    alert($(this).attr('data-state'));
    window.location.href = $(this).attr('data-url');
});

检查小提琴：http://jsfiddle.net/sameersemna/ddaypwjv/4/

更新小提琴：http://jsfiddle.net/sameersemna/ddaypwjv/6/ 一切顺利;)

【讨论】：

这似乎是个好主意，但我有 50 个州要这样做，这似乎是很多 javascript，这真的是最好的方法吗？
你不必添加更多的 javascript 只是更多的属性，比如假设 'dara-url' 并像我展示的那样在 javascript 中获取它