Javascript 如何更改“use”元素使用的子项的属性？

我学习SVG。我想更改第二次使用的圆填充值。我怎么做？这是我的尝试：

* { 笔画：棕色； 笔画宽度：1； 填充：无； } .帆布{ 边框颜色：绿色； 边框样式：实心； 边框宽度：1px； } .太阳>圆圈{ 填充物：黄色； } .烈日>圆圈{ 填充物：红色； } SVG学习 这是我的沙箱

---

CSS不能选择use元素的子元素，因为它们不是DOM的一部分。尽管如此，use元素本身的CSS属性还是可以继承的。因此，只要不设置中定义的引用元素的样式，将以的样式为准

请注意，不能有*{fill:…}规则。它将设置defs>foo>circle元素的样式，这将优先于use元素的继承。这就是为什么第二个太阳的笔划仍然是棕色的，尽管我已经定义了把它涂成绿色的规则

* { 笔画：棕色； 笔画宽度：1； } foo-rect{ 填充：无； } .帆布{ 边框颜色：绿色； 边框样式：实心； 边框宽度：1px； } 使用{ 填充物：黄色； } .烈日{ 填充物：红色； 笔画：绿色 } SVG学习 这是我的沙箱

---

你不应该用这个。只要用你想要的颜色画出你想要的形状。例如，我想用不同的填充值和半径值多次使用foo组。以后如果有必要，我会在一个地方更改foo定义，并且每次使用都会更新它。这与AutoCAD块定义类似。use并不是专门为这样工作而设计的。它的设计是为了多次展示一个项目。是否存在可以实现我的意思的东西？画出许多单独的项目。