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

Question

I am writing a userstyle for a website, I use css variables for configuration by the user. I am trying to use inline svg with a variable in it to create a checkmark set to the user's preferred accent color. But it doesn't seem to work.

In the code provided I just jammed in the var function, but I've also tried setting the color of the stroke to currentColor and setting the color of the element to the variable. Setting the mask and background-color work but I want a "pure inline svg" solution.

.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>');
}

The checkmark should be accent color. When I set it by simply putting in the var() it doesn't work and is transparent. Interestingly, when using the currentColor method, the stroke is black.

Answer 1

This is working:

 <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>

This is not working:

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")'

For a solution to your problem I would use 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 定位它（即，无法从.checkmark定位 svg类。唯一的其他选择是使用 javascript getPropertyValue来获取 css 变量--ColAccent的值，并使用它来创建具有有效颜色名称（即red ）或 URI 编码颜色值（即%23f00 ）的 url 字符串被解码为#f00 ) for stroke 。既然你不能使用javascript，我想不出任何其他方式。