如何通过CSS类修改作为背景图加载的SVG内部元素填充色

问题解答 #

1. 需求是否可以实现？ #

可以实现，你当前直接将SVG作为背景图片引用的方式不支持直接修改内部元素样式，调整实现方案后即可达成「同一SVG资源、外层加类修改内部引号颜色」的需求。

2. 修改SVG内部颜色的操作是否简单？ #

操作非常简单，只要调整SVG的引用方式、给对应元素做适配即可，全程只需要修改几行代码。

3. 最简单的实现方式是什么？是否直接换对应颜色的图片更便捷？ #

完全不需要更换多份不同颜色的图片，有比换图高效得多的实现方案，推荐最适配你现有代码结构的方案：
使用CSS mask实现，你原有伪元素的代码几乎不用改，只需要把背景图配置换成mask属性加载SVG即可，颜色直接通过背景色控制，不同类只需要设置不同背景色就行：

/* 基础类 */
.n-quotation-dumbbells:before {
    /* 把原来的background-image替换为mask配置 */
    mask: url("https://galina.xyz/wp-content/uploads/2021/10/quotation-dumbbells.svg") no-repeat;
    mask-size: 100%;
    /* 兼容webkit内核浏览器 */
    -webkit-mask: url("https://galina.xyz/wp-content/uploads/2021/10/quotation-dumbbells.svg") no-repeat;
    -webkit-mask-size: 100%;
    /* 背景色对应引号的颜色，默认值替换成你需要的默认引号色即可 */
    background-color: #000;
    display: inline-block;
    content:"";
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 10px;     
}
/* 柠檬色类，仅需修改背景色 */
.n-quotation-dumbbells.lemon-fill:before {
    background-color: #f5e050; /* 柠檬色值可自行调整 */
}
/* 其他颜色类同理，新增颜色仅需加几行代码 */
.n-quotation-dumbbells.red-fill:before {
    background-color: #e53e3e;
}

这种方案不需要修改SVG本身的代码，完全兼容你现有外层加类的用法，后续加新颜色只需要加一行颜色定义即可，比制作多份不同颜色的SVG图片效率高得多。

内容的提问来源于stack exchange，提问作者Michael