时间戳

首页 > 解决方案 > SVG defs 多个元素 CSS 变一

javascript - SVG defs 多个元素 CSS 变一

问题描述

我在 HTML 页面中有一个 SVG 元素。元素通过 Javascript 更改类，例如，我可以通过编程将交通灯图形从绿色更改为红色。这适用于简单的元素，但是当 SVG 模板（在一个defs部分中，用 实例化use）包含多个图形类型（rect等ellipse）时，我正在苦苦挣扎，其中类更改应该只影响一些但不是所有图形。

SVG：

<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" />

Javascript：

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

CSS：

.trackPointOccOOC {
  fill: red;
}

因此，当我使用 item.cssClass = trackPointOOC 调用 updateItem 时，上面的片段适用于我希望矩形和多边形都变红的地方。

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

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

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

也许这是不可能的，我必须考虑另一种方式。或者这可能是显而易见的:) 我不擅长 CSS。谢谢。

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

标签： javascriptcsssvg

解决方案

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也没有改变。

推荐阅读