Html 在css中嵌入SVG的路径上使用类_Html_Css_Svg

Html 在css中嵌入SVG的路径上使用类

html css svg

Html 在css中嵌入SVG的路径上使用类,html,css,svg,Html,Css,Svg,我目前正在尝试将一些基本的SVG嵌入到我的CSS中作为数据URI——类似于前面讨论的内容所有这些都很好，除非我尝试创建一个类，该类的目标是一个内部路径： .alter { fill:red; } .caretDown { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath

我目前正在尝试将一些基本的SVG嵌入到我的CSS中作为数据URI——类似于前面讨论的内容

所有这些都很好，除非我尝试创建一个类，该类的目标是一个内部路径：

.alter { 
    fill:red; 
}
.caretDown { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 10.07h-5.656l5.656-5.656v5.656z' class='alter' /%3E%3C/svg%3E"); 
}

现在，这似乎不起作用，但如果我在HTML中以普通SVG的形式进行此操作，则效果很好：

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path d="M11 10.07h-5.656l5.656-5.656v5.656z" class="alter"/>
    </svg>
</body>

我有一些关于为什么这不起作用的理论，但我找不到任何具体的原因。

如果您使用的是像SASS这样的CSS预处理器，您可以编写一个小函数，在其中传递填充颜色，并返回带有该传递颜色的SVG作为填充

@函数插入符号向下图标svg（$fill:'111'）{
@返回“”；
}
.caretDown{
背景图像：url（“数据：image/svg+xml；utf8，{svg填充（$caret-down-icon-svg）}”）；
&.光{
背景图像：url（“数据：image/svg+xml；utf8，{svg填充（$caret-down-icon-svg，ccc）}”）；
}
}

是的，我考虑过，但最终它复制了CSS中的SVG，并最终将我需要发送的字节增加了一倍。你最终找到解决方案了吗？我也面临同样的难题。我能找到的所有解决方案都建议使用背景色遮罩，但如果您想要多种颜色，这并没有帮助。

.dark .alter { 
    fill:red; 
}
.light .alter { 
    fill:red; 
}