У меня есть элемент SVG на странице HTML. Элементы изменяют классы через 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;
}
Таким образом, приведенные выше фрагменты работают там, где я хочу, чтобы прямоугольник и многоугольник стали красными, когда я вызываю updateItem с помощью item.cssClass = trackPointOOC.
Но эффект, который мне нужен, заключается в том, что прямоугольник и многоугольник находятся в трех состояниях: то есть отображается прямоугольник, или отображается многоугольник, или отображаются оба (или они приобретают разные цвета, или что-то еще). Опять же, я могу показать / скрыть все элементы pointUL, но мне нужно, чтобы каждый элемент индивидуально получил свои собственные характеристики. Хотя я использовал прямоугольник и многоугольник, может быть 5 прямоугольников и эллипс, или прямоугольник + эллипс + многоугольник, или что-то еще.
Если это возможно, я полагаю, что CSS и SVG необходимо связать вместе через --- element1 --- и --- element2 ---, чтобы в CSS были подразделы:
.trackPointOccOOC {
---element1---
fill: red;
---element2---
fill: black;
}
Возможно, это невозможно, и мне нужно подумать о другом способе. Или, может быть, это тупо очевидно :) Я плохо разбираюсь в CSS. Спасибо.
[Править] Ссылка ccprog определенно указала мне правильное направление (спасибо), но я думаю, что она заслуживает полного ответа (ниже).
Определенно указал мне в правильном направлении, спасибо.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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 также не изменился.
Возможный дубликат Повторно использовать набор из множества объектов, но теперь назначить каждому объекту отдельную непрозрачность, не копируя весь код?