所以我正在创建一个美国的交互式地图,点击状态后,我的网站将带您进入该状态的静态页面(例如,阿拉斯加州)。我的问题是我如何围绕这个包裹锚标签?这是我所拥有的一个州的一个例子。所有其他状态遵循相同的模式/结构。我以前从来没有处理过这个,因为这是我第一次使用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>
答案 0 :(得分:1)
将{id}属性替换为<g>
,将<a xlink:href="<wherever you want to go to>">
替换为</g>
,将形状转换为链接。< / p>
答案 1 :(得分:0)
这很容易使用Javascript,最好是使用jQuery
给路径标签一个属性data-state =&#34; name_of_state&#34;和data-url =&#34; your_link&#34;
$('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/ 一切都是最好的;)