Question

我想要替代字体图标。所以我决定创建SVG图标。我正在使用Grunt和https://github.com/jkphl/grunt-iconizr。一切正常。我的输出SCSS文件使用Grunt Iconizr：

第一

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        @extend %icon;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2223.90625%22%20viewBox%3D%220%200%20512%20510%22%20enable-background%3D%22new%200%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20275.311l151.114-150.395%2054.886%2055.148-206%20205.02-206-205.02%2054.887-55.148z%22%2F%3E%3C%2Fsvg%3E");
    }

第二个输出文件，替代第一个文件：

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        background-position: 0 0;
        @extend %icon;
        background-image: url(icons/icons.svg);
    }

我想在图标上创建悬停效果。有什么方法可以使用纯CSS解决方案进行悬停效果？我知道我可以使用fill: #CCC;属性来做到这一点......但前提是我的HTML代码中有SVG。如果我使用字体图标，可以通过更改CSS颜色属性轻松完成。有什么方法可以改变background-image: url(...)附加的SVG颜色吗？

Answer 1

您可以在悬停时添加opacity值：

.icon-arrow-down:hover { 
    opacity: 0.5;
}

在悬停时更改SVG图标的颜色

1 个答案: