用css变量填充SVG

我试图在SVG（设置为背景图像）中使用CSS变量作为填充颜色，但很难让它正常工作。它显示默认的黑色，但当我检查它时，我可以看到css变量在那里，并显示我想要的颜色

HTML

---

我见过SVG中使用CSS变量，但我不确定是否可以使用背景图像？我对使用SVG和CSS变量都是新手，所以我不确定我是否做错了什么。。。想了解一下为什么不能正确渲染颜色

不要将svg作为背景，这样做你就无法控制它的填充，而是尝试在html中内联添加它，通过css你可以通过css变量控制填充，请查看下面的工作示例，希望有帮助：）

：根目录{
--原色：hsl（332,61,78%）；
}
div{
宽度：100px；
高度：100px；
}
.测试{
背景：var（--原色）；
}
.图标{
颜色：var（--原色）；
填充：当前颜色；
宽度：64px；
高度：64px；
}

测试css变量颜色

好了，我们开始。。。我将首先解释为什么它不起作用，然后我将展示另一种选择

为什么您的方法不起作用

在您的示例中，svg不是DOM的一部分。因此，不能使用css修改svg的属性

您正在做的是向url中的svg添加一个内联样式。由于浏览器无法将

--原色

识别为一种颜色，因此无法正常工作

另一种方法

另一种方法是将svg放在html中并伪造背景。我通过绝对定位svg并使用z索引将其移动到背景来实现这一点

请注意，您必须修改svg或定位，以按照您想要的方式放置背景。通常情况下，您会使用背景大小。但是通过一些努力，您可以在svg中复制这种行为，或者通过使用css更好地定位它

：根目录{
--原色：hsl（332,61,78%）；
}
div{
宽度：100px；
高度：100px；
}
.测试{
背景：var（--原色）；
}
.icon{/*绝对定位相对位置*/
位置：相对位置；
}
.icon>svg{
位置：绝对位置；
顶部：0px；
右：0px；
左：0px；
底部：0px；
z指数：-1；
}
.icon>svg>path{/*使用css定位图像*/
填充：var（--原色）；
}

测试css变量颜色
这里有文字

现在，您可以将SVG作为掩码图像而不是背景。不要忘记为.icon块设置css变量的背景色

.icon {
  background: var(--primary-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
} 

---

如果只需要控制一种颜色，可以在

fill

属性中使用

currentColor

关键字，并通过css

color

属性对其进行更改

.icon {
  color: var(--primary-color);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='currentColor' /%3E%3C/svg%3E");
}

：根{
--颜色：#123456；
}
.类名{
填充：var（--颜色）
}

---

试试这个

嘿！是的，正方形的背景应该根据CSS变量（原色）改变颜色。SVG填充颜色也应该改变，但在本例中不是。这个方块只是显示CSS变量颜色正在应用于它：）不，这是不可能的，当用URLDeplicate of调用CSS变量时，您不能这样使用它：谢谢您花时间回答！我之所以选择使用SVG作为背景，是为了尝试替换select标记中的下拉箭头（抱歉，在问题/代码笔中没有说明这一点！）。。。不确定在标签中使用实际的SVG是否适合我。但是很高兴知道CSS变量可以在内联SVG中工作！在这种情况下，使用字体图标，将所需的svg文件上载到应用程序，或从图标库中选择一个并生成字体，然后您将能够使用类似于fontawsome的字体，然后您将可以控制颜色。：）谢谢你的回答！非常清楚，帮助我理解为什么我的CSS变量不起作用。同样感谢这个例子，不幸的是，我不确定我是否可以走这条路，因为我尝试使用SVG作为背景的原因是为了替换select标记下拉列表（aghh selects非常难使用！）。但是很好的解释是：）虽然这段代码可以为这个问题提供一个解决方案，但最好添加上下文来说明它为什么/如何工作。这可以帮助未来的用户学习并最终将这些知识应用到他们自己的代码中。在解释代码时，用户也可能会给予积极的反馈/支持。不幸的是，

currentColor

不适用于url编码的SVG。最好的答案是imo。所有主要浏览器都支持-webkit前缀，实现它的代码要少得多。

.icon {
  background: var(--primary-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' /%3E%3C/svg%3E");
} 

.icon {
  color: var(--primary-color);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='currentColor' /%3E%3C/svg%3E");
}

<path class="class-name"/>

:root {
   --color : #123456;
}
.class-name {
   fill : var(--color)
}