项目中常会用到心型图标表示收藏，一般是灰线框无填色表示未收藏状态，填充的带颜色为已收藏状态。

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

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

思路如图示：
第一步：定义SVG结构

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

第二步：控制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变量，能更灵活控制样式细节。