我想用 sass 将图标悬停到白色（没有过滤器）

Question

$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,0,1,0,58.044,29.585,29.017,29.017,0,0,0,29.022.563Zm0,11.234a10.3,10.3,0,1,1-10.3,10.3A10.3,10.3,0,0,1,29.022,11.8Zm0,40.257a22.425,22.425,0,0,1-17.144-7.981,13.048,13.048,0,0,1,11.527-7,2.864,2.864,0,0,1,.831.129,15.494,15.494,0,0,0,4.786.807,15.435,15.435,0,0,0,4.786-.807,2.863,2.863,0,0,1,.831-.129,13.048,13.048,0,0,1,11.527,7A22.425,22.425,0,0,1,29.022,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,0,0,0,7.207,5.875a1,1,0,1,0,1.3,1.52A10,10,0,0,1,24.951,14H22l4,6,4-6H26.949A12.012,12.012,0,0,0,15,3ZM4,10,0,16H3.051a11.993,11.993,0,0,0,19.742,8.125,1,1,0,1,0-1.3-1.52A10,10,0,0,1,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}”

Answer 1

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

所以首先用 css 有效的颜色变量替换你的颜色变量：

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

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

@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,0,1,0,58.044,29.585,29.017,29.017,0,0,0,29.022.563Zm0,11.234a10.3,10.3,0,1,1-10.3,10.3A10.3,10.3,0,0,1,29.022,11.8Zm0,40.257a22.425,22.425,0,0,1-17.144-7.981,13.048,13.048,0,0,1,11.527-7,2.864,2.864,0,0,1,.831.129,15.494,15.494,0,0,0,4.786.807,15.435,15.435,0,0,0,4.786-.807,2.863,2.863,0,0,1,.831-.129,13.048,13.048,0,0,1,11.527,7A22.425,22.425,0,0,1,29.022,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,0,0,0,7.207,5.875a1,1,0,1,0,1.3,1.52A10,10,0,0,1,24.951,14H22l4,6,4-6H26.949A12.012,12.012,0,0,0,15,3ZM4,10,0,16H3.051a11.993,11.993,0,0,0,19.742,8.125,1,1,0,1,0-1.3-1.52A10,10,0,0,1,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>

我想用 sass 将图标悬停到白色（没有过滤器）

I want to hover the icons to white with sass (without filter)

css

svg

sass

mixins

scss-mixins