gpt4 book ai didi

css - 是否可以在 svg 背景图像中使用 css 变量?

转载 作者:行者123 更新时间:2023-11-28 08:54:47 28 4
gpt4 key购买 nike

CSS 变量在 SVG 背景图像中使用时不起作用:

.icon-24 {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: silver;
}

.icon-24-stroke {
--color-test: red;
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='var(--color-test)' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1px'> <circle cx='12' cy='12' r='8' /> </svg>");
}

.icon-24-fill {
--color-test: red;
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='var(--color-test)'><circle cx='12' cy='12' r='8' /></svg>");
}
<p>The circle stroke should be red:</p>
<i class="icon-24 icon-24-stroke"></i>
<p>The circle fill should be red:</p>
<i class="icon-24 icon-24-fill"></i>

有没有办法让它工作?

最佳答案

就像@BoltClock 在评论中所说的那样,不可能在 url 中使用 css 变量。

关于css - 是否可以在 svg 背景图像中使用 css 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48910103/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com