The inconsistencies with how browsers handle CSS with SVG <use> is maddening. I would think that I could use an inline <style> element in the SVG to use a CSS variable to style all elements of a class, but nope, that is handled very inconsistently by browsers. Every single element to be styled by CSS needs a style attribute on the element. Urgh. Well at least that does work in Firefox, Chromium, and GNOME Web.
4
Replies
1
Boost
Inkscape shows elements with `style="fill: var(--myCssVar, red);"` as having a black fill, which, okay I guess, at least I can see it by default. Of course changing the fill color in Inkscape replaces that style attribute on the element. Inkscape does have an option for putting `style="fill: currentColor"` but I don't see any obvious way to specify to Inkscape what currentColor should be, and it seems to default to transparent or white.
Also using currentColor in SVGs only allows parameterizing a single color. It would be nice if Inkscape could work with CSS variables in addition to currentColor.
```
<style>
path { fill: var(--myCssVar, red);
</style>
```
in the SVG works fine across browsers if the SVG is inlined. But inlined SVGs are not cacheable, and things get wonky and inconsistent across browsers with <use>... unless you put the style as an attribute on each SVG element 😵💫
Curiously, this does work across browsers with <use>...
```
svg use {
fill: red;
]
```
if the SVG element does not specify any style attribute on the element. But you can't use any more specific CSS selector because of the shadow DOM boundary with <use>. Sigh.
