结合css变量,控制收藏心型图标样式

项目中常会用到心型图标表示收藏,一般是灰线框无填色表示未收藏状态,填充的带颜色为已收藏状态。结合css变量,控制收藏心型图标样式插图

以往做法通常是用到两个svg图标,用css的display控制相应图标。这样其实有点傻的感觉。当然用iconfont, 雪碧图结合类名可实现仅用类名即可控制状态,但如果我就喜欢用svg图标呢?

今天忽来灵感:是否可将两种形态图标加到同一svg内,用css变量控制相应fill状态来达到相同效果呢?

思路如图示:
结合css变量,控制收藏心型图标样式插图1第一步:定义SVG结构

SVG结构,分别为两个形态的结构引入两个css变量,
线框形态用 var(–fav-line, none)
填充形态用 var(–fav-fill, #fff)
9a8b9fa0920405d09e6d0a7b2f47720c

第二步:控制css变量

如示例,图标的外层用span.fav,.fav对应定义未选中状态时如上两个css变量的值:
–fav-fill: none;
–fav-line: rgba(255,255,255,0.5);

当选中,则js会给span.fav加个.active(js部分略),则变量值设为:
–fav-fill: var(–wb-theme-color, #8a3ff8);
–fav-line: none;

* 当中的var(–wb-theme-color)为站点主色调。

效果如图示,完美~

好处是在用SVG的同时,精简了DOM结构,引用css变量,能更灵活控制样式细节。

2b372e21564c65d3bfc182593fe68973

220c7ca689dfec1e1a36193e7918ea71

 

我们将24小时内回复。
2024-02-23 02:59:22
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
取消

选择聊天工具: