链接和svg路径关联

Question

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

Answer 1

您所做的是右键单击svg文件，选择使用notepad ++编辑，而不是将其复制到您正在使用的wathever ide。之后只需用这个

包含带标签

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

最后只需编辑css样式

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

我希望这会有所帮助

还有video完美展示了如何执行此操作

您可以在此site

上找到代码

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

Answer 2

看看你是否想要https://jsfiddle.net/grabantot/s6cjwxk1/1/。 它使用jquery和svg.js来简化，但我希望你明白这一点。

$(function(){
   $("#dropdown").on('mouseleave', function(e){
      console.log($('#dropdown').val());
   });
});