Change attributes defined in defs on use element

Question

How can I achieve changing the style of an \"use element\", defined in defs, through scripting? I was trying to move in the w3c working draft interfaces, but I lost in that laby

Answer 1

Nowadays, thanks to CSS variables and some clever

nesting, it can be done.
Check out my CodePen here

The trick is to contain your SVG in a div and set the style variables in a nested

Notice that the style rule here points to the div.class?
Now in you CSS file you can make a more specific rule pointing to the within the container:

.circle-1 svg {
  --stroke: yellow;
  --fill: salmon;
}

Note: I did experiment to get this working, it was tricky ;-)