HTML利用clip-path制作地图的方法

clip-path制作的地图是指地理上的地图,不是指网站地图!大天朝的地图想必每个中国人都知道,也经常见到。站长应该见得特别多了,特别是在检查网站速度的时候,检查平台会以一张地图的形式展示出来,那么这种每个区域颜色不同的地图是怎么制作的呢?没错,就是clip-path,前端大佬应该很清楚,小白就跟我一起学习下吧,我也是第一次哟。

HTML利用clip-path制作地图的方法

实现原理

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,也可以是一个形状如circle()。

准备数据

剪切区域形状的数据,如下:(width: 565, height: 475)

城市数据,用于鼠标移入等交互显示的数据

HTML代码

JavaScript交互代码

css样式代码

浏览器看一下,是不是出现地图了?

转载请注明出处:看飞碟 » HTML利用clip-path制作地图的方法

赞 (1) 送糖

评论 0

评论前必须登录!

登陆 注册

可爱的来客!请作者吃颗糖吧

支付宝扫一扫打赏

微信扫一扫打赏

你好,我是Jeson