Javascript SVG定义多个元素CSS更改一个

我在HTML页面中有一个SVG元素。元素通过Javascript更改类，因此，例如，我可以通过编程将红绿灯图形从绿色更改为红色。这对于简单的元素很好，但是当SVG模板（在

defs

部分中，用

use

实例化）包含多个图形类型（

rect

，

eliple

等）时，我遇到了困难，其中类的更改只会影响一些图形，而不会影响所有图形

SVG：

CSS:

因此，上面的代码片段在使用item.cssClass=trackPointOOC调用updateItem时，我希望矩形和多边形都变为红色

但我需要的效果是，矩形和多边形处于三种状态：即，矩形显示，或多边形显示，或两者都显示（或它们获得不同的颜色，或其他）。同样，我可以显示/隐藏pointUL的所有元素，但我需要对每个元素进行单独设置，以获得它们自己的特性。当我使用一个矩形和一个多边形时，可能有5个矩形和一个椭圆，或者一个矩形+椭圆+多边形，或者其他的

如果可能的话，我想CSS和SVG需要通过--element1---and--element2---链接在一起，这样CSS就会有子部分：

.trackPointOccOOC {
  ---element1---
  fill: red;
  ---element2---
  fill: black;
}

也许这是不可能的，我必须想另一种方法。或者可能是显而易见的：）我不擅长CSS。谢谢

---

[编辑]ccprog的链接当然为我指明了正确的方向（谢谢），但我认为它值得一个完整的答案（如下）。

CSS包含许多控制元素的变量：

.trackPointOccOOC {
  --colourN: red;
  --visibleN: block;
  --colourR: red;
  --visibleR: block;
  animation: redFlash 1s infinite;
}
.trackPointLockN {
  --colourN: white;
  --visibleN: block;
  --colourR: grey;
  --visibleR: none;
  animation: none;
}
.trackPointLockR {
  --colourN: grey;
  --visibleN: none;
  --colourR: white;
  --visibleR: block;
  animation: none;
}

（有9个州，上面显示了3个州）

然后SVG定义：

<g id="pointUL">
  <rect x="0" y="4" width="8" height="4" style="fill: var(--colourN); display: var(--visibleN);" />
  <polygon points="2,0 6,0 8,4 8,8" style="fill: var(--colourR); display: var(--visibleR);" />
</g>

最后，SVG保持不变：

<use id="ICX_P647YA" xlink:href="#pointUL" x="184" y="128" />

---

Javascript也没有改变

可能的副本肯定为我指明了正确的方向，谢谢。

.trackPointOccOOC {
  --colourN: red;
  --visibleN: block;
  --colourR: red;
  --visibleR: block;
  animation: redFlash 1s infinite;
}
.trackPointLockN {
  --colourN: white;
  --visibleN: block;
  --colourR: grey;
  --visibleR: none;
  animation: none;
}
.trackPointLockR {
  --colourN: grey;
  --visibleN: none;
  --colourR: white;
  --visibleR: block;
  animation: none;
}

<g id="pointUL">
  <rect x="0" y="4" width="8" height="4" style="fill: var(--colourN); display: var(--visibleN);" />
  <polygon points="2,0 6,0 8,4 8,8" style="fill: var(--colourR); display: var(--visibleR);" />
</g>

<use id="ICX_P647YA" xlink:href="#pointUL" x="184" y="128" />