可以在内联svg中使用css变量吗？
可以在内联svg中使用css变量吗？
提问于 2018-12-30 03:34:51
我正在写一个网站的用户样式，我使用css变量的用户配置。我正在尝试使用带有变量的内联svg来创建一个复选标记，以设置为用户首选的重音颜色。但它似乎不起作用。
在提供的代码中，我只是插入了var函数，但我还尝试将笔划的颜色设置为currentColor，并将元素的颜色设置为变量。设置蒙版和背景颜色是可行的，但我想要一个“纯内联svg”解决方案。
.checkmark {
background: url('data:image/svg+xml;utf8,\
\
');
}复选标记应为强调色。当我通过简单地放入var()来设置它时，它不工作并且是透明的。有趣的是，当使用currentColor方法时，笔划是黑色的。
Stack Overflow用户
发布于 2018-12-30 04:28:33
这是有效的：
这是
注释
工作：
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;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53972776
复制相关文章
相似问题
腾讯云开发者
