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

作者 : 枫瑞博客 本文共1074个字,预计阅读时间需要3分钟 发布时间: 2019-09-19 共978人阅读

原先发布了一个dw制作热点的方式,该方式简单容易上手。也有一定的弊端比如:如果后期某个区域需要修改颜色得修改图片,以及无法在上面做一些客户想要得效果。那么就百度了一些关于(SVGDeveloper)svg制作地图且拥有鼠标滑过颜色效果得比较少,大部分使用jq等插件实现,那么枫瑞博客今天在尽力无数采坑后带来一个适合新手的制作方式

 

前提说明:

1.首先下载工具:SVGDeveloper

2.安装该工具

3.有一个地图图片

步骤说明:

1.为了简单找了一个简单的地图,打开工具-File-New 随后在新窗口中选择svg点击ok

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

2.修改画布大小(证据项目需求,我们假装设置一个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>

3.导入图片,选择图片后在,点击画布既可以导入图片,但是这样导入的图片一开始是无法显示的,我们修该图片大小 坐标中心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:\枫瑞\热点地图\拉拉\img\dqfbt.png"  />

</svg>

3. 先点击画笔,随后选择背景为透明,在设置边框颜色

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

4.选择钢笔工具开始描边,描边好了之后是这样子有边框和多处的path标签 其中d参数m开始开始z表示结束

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

5.输入文字点击工具,但是这软件只能输入英文,还是非主流字体,我们先随意写下

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

 

实现鼠标滑过效果

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

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

我们整理下效果:(鼠标滑动颜色加深)

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

 

相关模板和案例文件下载:

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

 

 

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » 新手绘制svg地图热点纯css实现鼠标划滑过颜色变化效果

常见问题FAQ

枫瑞你想努力吗?
不 ,我只想找富婆

2 评论

  1. 666

  2. 妥妥的

发表评论