Question

我在HTML页面中有一个SVG元素。元素通过Javascript更改类，例如，我可以以编程方式将交通灯图形从绿色更改为红色。这对于简单的元素来说效果很好，但是当SVG模板（在defs实例中，用use实例化）包含多个图形类型（rect，{{1 }}等），其中类更改应该只影响部分图形，而不是全部图形。

SVG：

ellipse

Javascript：

<defs>
  <g id="pointUL">
    <rect x="0" y="4" width="8" height="4"  ---element1--- />
    <polygon points="2,0 6,0 8,4 8,8" ---element2--- />
  </g>
</defs>
<use id="ICX_P647YA" xlink:href="#pointUL" x="184" y="128" />

CSS：

function updateItem(item) {
    var element = document.getElementById(item.title);
    if (element != null) {
            element.className.baseVal = item.cssClass;

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

但是我需要的效果是rect和多边形处于三种状态：也就是说，显示rect，或者显示多边形，或者同时显示两种状态（或者它们获得不同的颜色，或其他任何颜色）。同样，我可以显示/隐藏pointUL的所有元素，但是我需要每个元素都单独获得自己的特征。虽然我使用了rect和一个多边形，但可能会有5个rect和一个椭圆，或者是rect + ellipse + polygon或其他任何东西。

如果可能的话，我想CSS和SVG需要通过--- element1 ---和--- element2 ---链接在一起，因此CSS会有小节：

.trackPointOccOOC {
  fill: red;
}

也许这是不可能的，我不得不考虑另一种方式。也许这很愚蠢：)我不太擅长CSS。谢谢。

[编辑] ccprog的链接的确向我指出了正确的方向（谢谢），但我认为这是一个完整的答案（如下）。

Answer 1

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也未更改。

SVG定义CSS更改多个元素

1 个答案: