如何使用SVG地圖形狀的可點擊鏈接

因此，我創建了美國的交互式地圖，在點擊某個州後，我的網站將帶您進入該州（本示例，阿拉斯加州）的靜態頁面。我的問題是如何在這個環繞一個錨標籤？這是我擁有的一個州的例子。所有其他國家都遵循相同的模式/結構。我從來沒有處理過這個問題，因爲這是我第一次使用SVG，所以任何建議/指針都會很棒！如何使用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>

來源

2014-10-07 user3688814

這不是關於非現場庫，它只是想知道如何插入鏈接到SVG。我不明白結尾。 – OneHoopyFrood 2014-10-07 19:04:16

另外，您可以在SVG中使用HTML鏈接。只需將整個小組包裝在一起即可。 – OneHoopyFrood 2014-10-07 19:04:52

我實際上已經完成了你正在做的事情。如果您通過[email protected]向我發送電子郵件，我會給您一個指向該解決方案的鏈接。我不想在這裏添加鏈接，冒着看似垃圾郵件的風險。 – OneHoopyFrood 2014-10-07 19:11:30

將不具有id屬性的<g>元素替換爲<a xlink:href="<wherever you want to go to>">和</g></a>，該元素將形狀變成可用作鏈接的東西。

來源

2014-10-07 21:25:58

那簡單，你只使用JavaScript最好使用jQuery

給路徑標籤的屬性數據狀態= 「name_of_state」和數據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/ 所有最好的;）

來源

2014-10-07 19:01:48

這似乎是一個好主意，但我有50個州來做到這一點，這似乎很多的JavaScript，這真的是最好的方法去做吧？ – user3688814 2014-10-07 19:37:54

你不需要添加更多的JavaScript只是更多的屬性，如假設'dara-url'並獲取它在JavaScript中，因爲我已經顯示 – 2014-10-08 00:32:25

如何使用SVG地圖形狀的可點擊鏈接

回答

相關問題