我想用sass悬停图标为白色不带过滤器

编程问答 2022-08-14

问题描述

$cwhite : "fff";
$cblack : "000";
$icon-bg1 : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58.045' height='58.044' viewBox='0 0 58.045 58.044'%3E%3Cpath id='usericon' d='M29.022.563A29.022,29.022,1,58.044,29.585,29.017,29.022.563Zm0,11.234a10.3,10.3,1-10.3,10.3A10.3,11.8Zm0,40.257a22.425,22.425,1-17.144-7.981,13.048,11.527-7,2.864,.831.129,15.494,4.786.807,15.435,4.786-.807,2.863,.831-.129,11.527,7A22.425,52.054Z' transform='translate(0 -0.563)' fill='%23#{$cblack}'/%3E%3C/svg%3E";
$icon-bg2 : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24' viewBox='0 0 30 24'%3E%3Cpath id='refreshicon' d='M15,3A11.967,11.967,7.207,5.875a1,1.3,1.52A10,10,24.951,14H22l4,6,4-6H26.949A12.012,12.012,15,3ZM4,16H3.051a11.993,11.993,19.742,8.125,0-1.3-1.52A10,5.049,16H8Z' transform='translate(0 -3)' fill='%23#{$cblack}' /%3E%3C/svg%3E";

@mixin sidbarIco($backImg,$fill-hover){
    background-image:url($backImg);
    // &:hover{
        // what code?   
    // }
}

.sidbar .ico{
    display: block;
    width:100px;
    height:100px;
    background-repeat: no-repeat;
    transition: all .4s ease;
}
.sidbar .ico-1{@include sidbarIco($icon-bg1,$cwhite)}
.sidbar .ico-2{@include sidbarIco($icon-bg2,$cwhite)}

我有一个包含2个图标的侧边栏。 我将svg用于图标。 我使用一个变量更改了svg的颜色，其默认值为黑色。 我也想用一个变量来改变悬停颜色。 在内容svg中使用了“ fill ='％23＃{$ cblack}”

解决方法

一个想法是使用css mask-image属性来播放作为背景图像插入的svg的颜色：

因此，首先将您的color变量替换为css有效的颜色变量：

$cwhite : #fff;
$cblack : #000;

然后在您的mask-image函数中使用sidbarIco：

@mixin sidbarIco($backImg,$fill-hover){
    background-color: $cblack;
    -webkit-mask-image: url($backImg);
    -webkit-mask-repeat: no-repeat;
    
    &:hover{
      background-color: $fill-hover;
    }
}

选中this snippet即可查看其运行情况。

这是编译后的示例：

.sidbar .ico {
    display: block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    transition: all .4s ease;
}

.sidbar .ico-1 {
    background-color: #000;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58.045' height='58.044' viewBox='0 0 58.045 58.044'%3E%3Cpath id='usericon' d='M29.022.563A29.022,29.022,1,58.044,29.585,29.017,29.022.563Zm0,11.234a10.3,10.3,1-10.3,10.3A10.3,11.8Zm0,40.257a22.425,22.425,1-17.144-7.981,13.048,11.527-7,2.864,.831.129,15.494,4.786.807,15.435,4.786-.807,2.863,.831-.129,11.527,7A22.425,52.054Z' transform='translate(0 -0.563)' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
}

.sidbar .ico-1:hover {
    background-color: #fff;
}

.sidbar .ico-2 {
    background-color: #000;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24' viewBox='0 0 30 24'%3E%3Cpath id='refreshicon' d='M15,3A11.967,11.967,7.207,5.875a1,1.3,1.52A10,10,24.951,14H22l4,6,4-6H26.949A12.012,12.012,15,3ZM4,16H3.051a11.993,11.993,19.742,8.125,0-1.3-1.52A10,5.049,16H8Z' transform='translate(0 -3)' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
}

.sidbar .ico-2:hover {
    background-color: #fff;
}
<ul class='sidbar'>
  <li class='ico ico-1'></li>
  <li class='ico ico-2'></li>
</ul>

mixinsmixinssasssassscss-mixinssvgsvgsvg