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

问题描述

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

HTML

测试css变量颜色
<div class="icon">

CSS

:root {--primary-color: hsl(332, 61%, 78%);}div {宽度:100px；高度:100px；}.测试 {背景:var(--primary-color);}.图标 {背景: 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.,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");}

这里有一个代码笔供您查看！

我已经看到在 SVG 中使用了 CSS 变量这里 但我不确定是否可以处理背景图像?我是使用 SVG 和 CSS 变量的新手，所以我不确定我是否做错了什么......很想知道为什么它不能正确呈现颜色！

解决方案

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

为什么你的方法行不通

在您的示例中，svg 不是 DOM 的一部分.所以你不能使用 css 来修改 svg 的属性.

您正在做的是向您的 url 中的 svg 添加内联样式.由于浏览器无法将 --primary-color 识别为颜色，因此它不起作用.

另一种方法

另一种方法是将 svg 放在 html 中并伪造背景.我通过绝对定位 svg 并使用 z-index 将其移动到背景来做到这一点.

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

:root {--primary-color: hsl(332, 61%, 78%);}div {宽度:100px；高度:100px；}.测试 {背景:var(--primary-color);}.icon{/*位置相对使绝对定位起作用*/位置:相对；}.icon>svg{位置:绝对；顶部:0px；右:0px；左:0px；底部:0px；z-索引:-1；}.icon>svg>path{/*用css定位图片*/填充:var(--primary-color);}

测试css变量颜色
<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>文本在这里...</p>

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

Here is a codepen to check out!

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.

Why your approach doesn't work

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

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.

An alternative approach

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.

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>

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