javascript - 链接和svg路径关系

Question

请帮助我，我使用 svg 路径创建了自定义 map 。如何在 map 上创建链接和 depanding 路径之间的关系。因此，当我将鼠标悬停在链接上时，该路径会更改填充颜色。 这是 map 的例子。 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)
}