今天在写页面的时候遇到一个不是很好画的页面, 关于记录签到记录, 这里运用svg解决了这个问题, 拿出来分享一下;
首先先让UI设计师将"签到记录"那部分图片生成svg格式, 直接在html结构里展示svg, 图片中每一块分成了一个g标签, g里面包含了每块的path, 只需在交互时(g支持click事件)修改当前g标签下的path的fill的颜色即可, 接下来就可以实现想要的效果; 注意:g和图片的每一块有时不是按顺序对应的;
页面样式
附上简单的demo: demo (由于时间问题, 没有做对应, 这里只是说一下遇见这种页面解决的思路);
