SVG определяет несколько элементов, CSS меняет один

У меня есть элемент 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 определенно указала мне правильное направление (спасибо), но я думаю, что она заслуживает полного ответа (ниже).

Определенно указал мне в правильном направлении, спасибо.

GeoffM 21.07.2018 04:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
234
1

Ответы 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 также не изменился.

Другие вопросы по теме