链接和svg路径关系答案

【问题标题】：Link and svg path releationship链接和svg路径关系
【发布时间】：2016-05-08 19:20:30
【问题描述】：

请帮助我，我使用 svg 路径创建了一个自定义地图。如何在地图上的链接和 depanding 路径之间创建关系。因此，当我悬停链接时，该路径会更改填充颜色。这是地图的例子。 image

【问题讨论】：

【解决方案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)
}

【讨论】：

【解决方案2】：

您所做的是右键单击 svg 文件，选择使用 notepad++ 编辑，然后将其复制到您正在使用的任何 ide。之后只需用这样的标签括起来

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

最后只编辑css样式

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

希望对你有帮助

还有一个video 完美地展示了如何做到这一点

你可以在这个site上找到代码

PS：你的图片链接不起作用

【讨论】：

感谢您的帮助，但grabantot 解决了我的问题。