绘制svg地图热点用css实现鼠标划滑过颜色变化特效

修改画布大小（证据项目需求，我们假装设置一个600*600的）在上面代码出直接修改宽高即可

<svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

导入图片，选择图片后在，点击画布既可以导入图片，但是这样导入的图片一开始是无法显示的，我们修该图片大小 坐标中心x和y也设置为0，这样就可以图片和画布同样大小并且在中心，地图也显示出来了

<svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="600" height="600" xlink:href="G:枫瑞热点地图拉拉imgdqfbt.png"  />
 
 
</svg>

先点击画笔，随后选择背景为透明，在设置边框颜色
选择钢笔工具开始描边，描边好了之后是这样子有边框和多处的path标签 其中d参数m开始开始z表示结束
输入文字点击工具，但是这软件只能输入英文，还是非主流字体，我们先随意写下

实现鼠标滑过效果
为了实现这个效果，尝试了很多方式，最简单的css方式，下载处理好的模板，使用编辑打开，我们上面说了 svg文件中也有path标签把里面的d值复制过去，svg中文字是x和y改成transform（x,y）。我们一开始导入的图片只是作为描边适合使用的，后期可以直接删除没啥用
相关模板和案例文件下载：
效果图

链接: https://pan.baidu.com/s/1Jz0SDF6bLh3wz91Z8ZfOEA 提取码: 5ecw