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>

Answer 2

我认为不可能在内联 svg 中直接使用 css 变量，因为内联 svg 不是直接在 DOM 中，并且您不能使用 css 定位它（即，无法定位 svg来自 .checkmark 类。唯一的其他选择是使用 javascript getPropertyValue 来获取 css 变量 --ColAccent 的值，并使用它来创建一个具有有效颜色名称的 url 字符串（即 { {1}}) 或 URI 编码的颜色值（即 red 被解码为 %23f00）为 #f00。由于你不能使用 javascript，我想不出任何其他方式。

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

2 个答案: