Question

我目前正忙着将一些基本的SVG嵌入我的CSS作为数据URI - 类似于讨论的here。

所有这一切都很好，除非我尝试拥有一个针对其中一条内部路径的类：

.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>

最终我试图以这种方式嵌入SVG，以便我可以将它们用作背景图像（在使用文本内联时似乎效果更好）并且我想通过类控制事物所以我可以通过切换定位/范围选择器来更改颜色（其中dark和light作为主题应用于主体）：

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

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

Answer 1

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

@function caret-down-icon-svg($fill: '111') {
    @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 10.07h-5.656l5.656-5.656v5.656z" fill="#{$fill}"/></svg>';
}

.caretDown { 
  background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg)}"); 

  &.light {
    background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg, ccc)}"); 
  }
}

Here's the Pen

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

1 个答案: