设计师给的四个SVG图标里,第一个图标其实是用带透明度属性画出来的,另外三个都不是。但是这一点我一开始没发现(谁没事闲的打开svg瞅着玩啊,都是神秘代码也看不懂)
四个图标我加到代码里,发现本应该在图标下面的进度条跑到上面来了,而且无论我怎么检查或者修改z-index,进度条还是在那里。
后来放大了看发现图标外部和内部的绿色进度条颜色其实不是很相同,遂猜测是图标带有透明度。打开svg对比其他的三个,发现果然!这位画第一个图标是用的opacity: 0.1。 解决办法也很简单,让老板去和设计师沟通下,如果下次能不这么画就尽量这别么画。然后目前凑合着用的话,就把图标加一个白色背景。这样背景在图标的下面,进度条的上面,完美解决!