鏈接和svg路徑relenship

Question

請幫助我，我創建了一個使用svg路徑的自定義地圖。我如何在地圖上創建鏈接和取消鋪設路徑之間的關係。所以當我懸停鏈接時，該路徑會改變填充顏色。 這是地圖的例子。 image

Answer 1

看看這是你想要的https://jsfiddle.net/grabantot/s6cjwxk1/1/。 爲簡單起見，它使用jquery和svg.js，但我希望你明白。

for (var i=0; i<lines.length; i++) { 
    var line = lines[i]; 
    (function(line) { 
     $('#svg').before('<p id="l'+ i + '">line_' + i + '</p>') 
    console.log($('l'+i)) 
    $('#l'+i).hover(function() { 
     line.attr({'stroke':'#00F', 'stroke-width':8}) 
    }, function() { 
     line.attr({'stroke':'#f00', 'stroke-width':5}) 
    }) 
    })(line) 
} 

Answer 2

你所做的是右鍵單擊svg文件，選擇使用notepad ++進行編輯，然後將其複製到您正在使用的瀏覽器中。後來才與標籤圍住這樣

<a href="..."> 
<path d="..."> 
</a> 

最後只需編輯CSS樣式

svg { height: 50vw; } 
path { fill: #d3d3d3; transition: .6s fill; } 
path:hover { fill: #eee; } 

我希望這有助於

還有一個video完美地展示瞭如何做到這一點

您可以在此找到代碼site

PS：您的圖像鏈接不起作用