我试图使用CSS变量在我的SVG（这是设置为背景图像）的填充颜色，但我有困难，让它的工作。它显示默认的黑色，但当我检查它时，我可以看到css变量在那里，并显示我想要的颜色。
HTML
<div class="test">
Testing the css variable color
</div>
<div class="icon">
</div>CSS
:root {
--primary-color: hsl(332, 61%, 78%);
}
div {
width: 100px;
height: 100px;
}
.test {
background: var(--primary-color);
}
.icon {
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='var(--primary-color)' /%3E%3C/svg%3E");
}Here is a codepen to check out!
我见过在SVG here中使用CSS变量，但我不确定是否可以使用背景图像？我对使用SVG和CSS变量都是新手，所以我不确定我是否做错了什么。会喜欢一些见解，为什么它没有正确渲染颜色！
8条答案
按热度按时间xzlaal3s1#
您可以将SVG包含为
mask-image，而不是background-image。记住，将background-color设置为.icon块的CSS变量。bprjcwpo2#
好了，我们走吧……我将首先解释为什么它不起作用，然后我将展示一个替代方案。
为什么你的方法行不通
在您的示例中，svg不是DOM的一部分。所以你不能使用css来修改svg的属性。
你正在做的是在你的url中添加一个inline-style到svg中。由于浏览器无法识别
--primary-color为颜色，因此无法正常工作。另一种方法
另一种方法是将svg放在html中并伪造一个背景。我通过绝对定位svg并使用z-index将其移动到背景中来做到这一点。
请注意，您将不得不修改svg或定位，以按照您想要的方式放置背景。通常，你会使用background-size来实现这一点。但是通过一些努力，你可以在svg中复制这种行为，或者通过使用css更好地定位它。
fruv7luv3#
不要将svg作为背景，这样做你就无法控制它的填充，而是尝试在html中内联添加它，通过css你可以通过css变量控制填充，请查看下面的工作示例，希望它有帮助：）
z4iuyo4d4#
使用
<symbol>标签和CSS变量CSS变量继承
fill属性。因此，可以在<symbol>标签中分配（声明）一个变量，该变量的值随后可以为svg元素的每个示例更改多次。每个
path、circle、ellips等可以为填充指定自己的变量fill = "var (- color-face)"，然后在外部样式表中更改其值：.monstr-colors { --color-face: #7986CB; --color-nose: #9FA8DA; }这种技术为多色svg创建了强大而灵活的样式选项。
例如，对于一个图标的一个状态，我们可以指定一个配色方案，并使用
: hover，为同一个图标指定不同的颜色集。下面是一个示例，根据您的口味，图像的配色方案很容易创建和更改：
下面是一个组合的示例，其中对同一个图像的三个示例进行样式化。
创建的
<use xlink: href = "# monstr"/>的每个示例都有自己的配色方案，该配色方案链接到嵌套的svg类。使用
:hover时，每个示例都使用相邻示例的配色方案替换配色方案。kx7yvsdv5#
我偶然发现了一个非常相似的案例，并想分享一个完全不同的方法。
使用css多背景功能（MDN Docs）
首先，您需要使用
fill="transparent"将SVG中希望着色为透明的部分现在您可以只指定多个背景，其中一个可以是您的变量，例如
mo49yndu6#
这里是一个更好的方法或我如何着色我的SVG。由于内联SVG对其余代码的可读性有一个苦涩的味道，并将它们添加为背景或遮罩，它们不能通过深色主题开关着色。在外部包含它们并将它们加载到html对象中：
此SVG现在是外部添加的。要设置颜色，您需要为所需的颜色设置SVG***内部的类***。
在路径中，将这些类设置为需要适应颜色的元素。现在，您将使用JavaScript操作这些填充值，并添加正确的CSS自定义属性：
我想，当你用
fill: var(--clr-text)在HTML中添加SVG时，性能会更好，但是在每个SVG有50kb代码后，会导致大量滚动我知道这比问题更进一步，但我很高兴在这些SO职位之前找到这一点。
dgtucam17#
如果只需要控制一种颜色，可以在
fill属性中使用currentColor关键字，并通过csscolor属性进行更改。envsm3lx8#
试试这个