Question

我正在尝试在我的SVG（设置为背景图像）中使用CSS变量来填充颜色，但是很难使其起作用。它显示了默认的黑色，但是当我检查它时，我可以看到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变量都是陌生的，所以我不确定自己是否做错了...很想了解为什么它不能正确呈现颜色！

Answer 1

不要将svg作为背景，这样做是因为您无法控制svg的填充，而是尝试以html内联方式添加它，并通过css可以通过css变量控制填充，请检查以下工作示例，希望对您有帮助：）

:root {
  --primary-color: hsl(332, 61%, 78%);
}

div {
  width: 100px;
  height: 100px;
}

.test {
  background: var(--primary-color);
}

.icon {
  color: var(--primary-color);
  fill: currentColor;
  width: 64px;
  height: 64px;
}

<div class="test">
  Testing the css variable color
</div>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129">
  <path 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"/>
</svg>

Answer 2

如果只需要控制一种颜色，则可以在currentColor属性中使用fill关键字，并通过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");
}

Answer 3

好的，我们开始...我将首先解释为什么它不起作用，然后我将展示一种替代方法。

为什么您的方法行不通

在您的示例中，svg不属于DOM。因此，您不能使用CSS修改svg的属性。

您正在做的是向URL中的svg添加内联样式。由于浏览器无法将--primary-color识别为颜色，因此无法正常工作。

另一种方法

另一种方法是将svg放入html并伪造背景。我是通过绝对定位svg并使用z-index将其移动到背景来完成此操作的。

请注意，您必须修改svg或位置，才能以所需的方式放置背景。通常，您将为此使用background-size。但是，您可以通过一些努力在svg中复制此行为，或者通过使用CSS更好地将其定位。

:root {
  --primary-color: hsl(332, 61%, 78%);
}

div {
  width: 100px;
  height: 100px; 
}

.test {
  background: var(--primary-color);
}
.icon{ /*postion relative for absolute positioning to work*/
  position: relative; 
}
.icon>svg{
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: -1;
}
.icon>svg>path{ /*target the image with css*/
  fill: var(--primary-color);
}

<div class="test">
  Testing the css variable color
</div>

<div class="icon">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' id='background'><path 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'/> </svg>
  <p>Text goes here...</p>
</div>

Answer 4

现在，您可以将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");
}

You can check it in this CodePan

Here is information from Caniuse about mask-image

And here documentation about mask property

Answer 5

<path class="class-name"/>

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

试试这个

SVG用CSS变量填充

5 个答案: