SVG images cannot use css variable as fill, they can only use rgb colors
SVG images can have a fill value in them, like so:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xmlns:v="https://vecta.io/nano"><path d="M26.528 82.964a7.14 7.14 0 0 0 2.113 5.063l.332.331c2.824 2.367 7.013 2.22 9.665-.44l32.78-32.878a7.15 7.15 0 0 0-.015-10.133l-32.879-32.78a7.15 7.15 0 0 0-9.329-.68l-.645.647c-2.612 2.62-2.781 6.724-.516 9.539L51.401 44.93a7.15 7.15 0 0 1 .015 10.133L28.361 78.187c-1.22 1.363-1.837 3.068-1.835 4.778z" fill="var(--bg-hover)"/></svg>
In this case, the fill value is a css variable called --bg-hover. It is a medium gray color. This SVG image is not displayed as gray though, it is displayed as pitch black.
If I use an rgb value instead (like fill="#7d7d7d") then it works normally. This only happens in SolidJS for me.
If anyone knows a solution to this problem, I'd be very happy!
1 Reply
yes! i does take on the color!
im still gonna be able to programmatically change the value of the variable right?
im gonna have to take a closer look into this. Thanks a lot!