CSS设置fill属性未对背景图引用的SVG生效问题咨询

你给伪元素设置的fill属性无法作用到作为背景图引入的SVG上。fill是SVG元素的专属样式属性，仅对当前HTML文档内嵌入的<svg>标签生效。当你通过background-image引入外部SVG文件时，该SVG属于独立的外部图像资源，页面的CSS无法修改外部资源内部的元素样式，所以设置的fill完全不生效。

• 方案1：直接内嵌SVG代码到页面中
  把你用到的SVG文件代码直接复制放到HTML结构里，此时你可以直接给SVG的根元素或者内部路径设置fill: red，就能正常改色。
• 方案2：修改SVG源文件的填充属性
  直接打开该SVG文件，在根<svg>标签或者内部的<path>标签上添加fill="red"属性，保存后再作为背景图引入，就会显示红色。
• 方案3：使用CSS遮罩（mask）实现动态改色，不需要修改SVG源文件
  把原有的background-image和fill属性替换为遮罩配置，用背景色作为SVG的填充色，兼容大部分现代浏览器，示例代码如下：

.bullet-silhouette-1:before {
    background-color: red;
    /* 兼容webkit内核浏览器 */
    -webkit-mask: url("https://galina.xyz/wp-content/uploads/2021/10/silhouette_1.svg") no-repeat;
    -webkit-mask-size: 100%;
    mask: url("https://galina.xyz/wp-content/uploads/2021/10/silhouette_1.svg") no-repeat;
    mask-size: 100%;
    display: inline-block;
    content:"";   
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;     
}

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