SVG用CSS变量填充 [英] SVG fill with css variables

问题描述

我正在尝试在SVG(设置为背景图像)中使用CSS变量来填充颜色，但是很难使其起作用.它显示了默认的黑色，但是当我检查它时，我可以看到css变量在那里并显示了我想要的颜色.

I am trying to use CSS variables in my SVG (which is set as a background image) for the fill color, but am having difficulty in getting it to work. It shows the default black, but when I inspect it I can see that the css variable is there and showing my desired color.

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");
}

这里是要签出的Codepen！

我已经看到SVG中使用了CSS变量此处，但是我不确定是否可以处理背景图片?我对使用SVG和CSS变量都是陌生的，所以我不确定自己是否做错了...很想了解为什么它不能正确呈现颜色！

I've seen CSS Variables being used in SVG here but I'm not sure if it's possible to do with background images? I'm new to both using SVG and CSS variables so I'm not sure if I'm doing something wrong... Would love some insight as to why it's not rendering the color properly!

推荐答案

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

Okay here we go... I will first explain why it does not work and then I will show an alternative.

为什么您的方法行不通

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

In your example the svg is not part of the DOM. So you cannot use css to modify the attributes of the svg.

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

What you are doing is adding an inline-style to the svg in your url. Since the browser does not recognise --primary-color as a color it doesn't work.

另一种方法

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

An alternative approach is to put the svg in the html and fake a background. I did this by absolute positioning the svg and moving it to the background with z-index.

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

Do note you will have to modify the svg or the positioning to place the background in the way you want. Normally you would use background-size for this. But with some effort you can replicate this behaviour within the svg or position it better by using 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>

这篇关于SVG用CSS变量填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！