是否可以在内联 svg 中使用 css 变量？

Question

我正在为网站编写用户样式，我使用 css 变量进行用户配置。我正在尝试使用带有变量的内联 svg 来创建一个设置为用户首选强调色的复选标记。但这似乎不起作用。

在提供的代码中，我只是插入了 var 函数，但我也尝试将笔画的颜色设置为 currentColor 并将元素的颜色设置为变量。设置蒙版和背景颜色有效，但我想要一个“纯内联 svg”解决方案。

.checkmark {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">\
    <path fill="none" stroke="var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>\
</svg>');
}

复选标记应该是强调色。当我通过简单地放入 var() 来设置它时，它不起作用并且是透明的。有趣的是，当使用 currentColor 方法时，描边是黑色的。

Answer 1

这是工作：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" style="--ColAccent:red">
    <path fill="none" style="stroke:var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>
</svg>

这是行不通的：

background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='--ColAccent:red' width='16' height='12'%3E%3Cpath fill='none' style='stroke:var(--ColAccent)' stroke-width='3' d='M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1'/%3E%3C/svg%3E%0A")'

为了解决您的问题，我将使用 javascript：

let _checkmark = document.querySelector(".checkmark");
let ColAccent = _checkmark.style.getPropertyValue("--ColAccent");
_checkmark.style.backgroundImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath fill='none' stroke='${ColAccent}' stroke-width='3' d='M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1'/%3E%3C/svg%3E%0A")`

.checkmark {
  width:100px;
  height:100px;
  border:1px solid;
}

<div class="checkmark" style="--ColAccent:skyBlue" ></div>