在CSS中设置SVG笔划的样式'；s伪属性'；内容：url（）'；

我有一个SVG，我通过

.nav-arrow::after {
    content: url(data:image/svg+xml;base64,xevr...);
}

现在我想通过CSS定义笔划的颜色，但这不起作用。 您知道如何在没有任何HTML的情况下导入SVG，并且仍然能够对其进行样式设置吗

这是我的SVG：

<svg class="nav-arrow" height="40" width="40">
    <g fill="#fff">
        <path stroke="#a01b1b" stroke-width="2" d="M 0 5 L 20 20 L 0 35" />
    </g>
</svg>

---

在这种特殊情况下，您可以使用SVG作为遮罩并调整背景颜色：

.box{
显示：内联块；
宽度：40px；
高度：60px；
位置：相对位置；
}
.box：：之前，
.box：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
/*中风*/
.box：：之后{
背景：var（--c，红色）；
-webkit掩码：url（'data:image/svg+xml；utf8'）居中/不包含重复；
掩码：url（'data:image/svg+xml；utf8'，）居中/不包含重复；
}
/*填充物*/
.box：：之前{
背景#f1f1；
-webkit掩码：url（'data:image/svg+xml；utf8'）居中/不包含重复；
掩码：url（'data:image/svg+xml；utf8'，）居中/不包含重复；
}

---

在这种特殊情况下，您可以使用SVG作为遮罩并调整背景颜色：

.box{
显示：内联块；
宽度：40px；
高度：60px；
位置：相对位置；
}
.box：：之前，
.box：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
/*中风*/
.box：：之后{
背景：var（--c，红色）；
-webkit掩码：url（'data:image/svg+xml；utf8'）居中/不包含重复；
掩码：url（'data:image/svg+xml；utf8'，）居中/不包含重复；
}
/*填充物*/
.box：：之前{
背景#f1f1；
-webkit掩码：url（'data:image/svg+xml；utf8'）居中/不包含重复；
掩码：url（'data:image/svg+xml；utf8'，）居中/不包含重复；
}

编辑base64内容以将笔划设置为需要的任何笔划。我不能这样做，因为我希望它可以通过SCSS变量进行自定义。在可运行的示例中共享您正在使用的SVG好吧，除了完全放弃之外，没有其他选择。你可以选择多个具有不同笔划的光标，并在它们之间切换。你是否将webpack与你的SCS一起使用？编辑base64内容以将笔划设置为任何需要的笔划。我不能这样做，因为我希望它可以通过一个SCSS变量进行自定义。在一个可运行的示例中共享您正在使用的SVG好吧，除了完全放弃之外，没有其他选择。你可以选择多个不同笔划的光标，并在它们之间切换。你是否将webpack与你的SCS一起使用？我对它进行了升级，因为这是一个很好的答案，但仍然有一个问题：我仍然需要白色背景色。在您的示例中，

填充

是透明的。如果我把它改为其他颜色，那就只有一个40×40px的盒子。@ do4min你可以考虑另一个面具，检查UpDeDi是因为它是一个很好的答案，但是还有一个问题：我仍然需要白色背景色。在您的示例中，

填充

是透明的。如果我把它改为其他颜色，那就只有一个40×40px的盒子。@ do4min你可以考虑另一个面具，检查更新。