下你所需,载你所想!
IT技术源码资料下载网站

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

:其他软件 2019-09-21 17:57:10

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

修改画布大小(证据项目需求,我们假装设置一个600*600的)在上面代码出直接修改宽高即可
绘制svg地图热点用css实现鼠标划滑过颜色变化效果

<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>

先点击画笔,随后选择背景为透明,在设置边框颜色
绘制svg地图热点用css实现鼠标划滑过颜色变化效果选择钢笔工具开始描边,描边好了之后是这样子有边框和多处的path标签 其中d参数m开始开始z表示结束
绘制svg地图热点用css实现鼠标划滑过颜色变化效果输入文字点击工具,但是这软件只能输入英文,还是非主流字体,我们先随意写下
绘制svg地图热点用css实现鼠标划滑过颜色变化效果
实现鼠标滑过效果
为了实现这个效果,尝试了很多方式,最简单的css方式,下载处理好的模板,使用编辑打开,我们上面说了 svg文件中也有path标签把里面的d值复制过去,svg中文字是x和y改成transform(x,y)。我们一开始导入的图片只是作为描边适合使用的,后期可以直接删除没啥用
绘制svg地图热点用css实现鼠标划滑过颜色变化效果相关模板和案例文件下载:
效果图
绘制svg地图热点用css实现鼠标划滑过颜色变化效果
链接: https://pan.baidu.com/s/1Jz0SDF6bLh3wz91Z8ZfOEA 提取码: 5ecw