Как я могу заполнить несколько одинаковых путей в двух отдельных изображениях SVG?

Question

Я делаю веб-сайт, где пользователь взаимодействует с svg и заполняет его цветом при щелчке, мне удалось заполнить путь при щелчке, но у меня сейчас есть проблема, потому что есть 2 svg, и когда вы нажимаете, чтобы заполнить какой-то путь наsvg1 иногда необходимо заполнить путь svg2.Я думал добавить несколько классов в svg, а затем проверить, имеет ли путь svg1 тот же класс, что и путь svg2, а затем заполнить оба пути на основе этого условия.Мне было интересно, если есть какой-то более легкий путь. Также не все пути должны быть заполнены одним и тем же цветом, только некоторые, и я не вижу в этом никакой картины.Я также подумал о добавлении некоторых метаданных, но это может еще больше осложнить ситуацию.

  mounted() {
    let self = this;
    this.$nextTick(() => {
      Array(...document.getElementsByTagName('svg')).forEach((obj) => {
        console.log(obj)
        let children = obj.getElementsByTagName('*')
        console.dir(children)
        let arr = Array(...children);
        arr.forEach(function(item) {
          if (item.classList.contains("frontstich")) {
            item.style.fill = 'black'
          }

          //I WAS THINKING OF ADDING CONDITION MENTIONED ABOVE HERE

          else {
            item.addEventListener('click', function() {
              item.style.fill = self.color;
            })
          }
        });

      })
    })
  }

это мой смонтированный раздел в компоненте vue

Answer 1

Если, как вы сказали, нет другого шаблона для определения того, что следует рисовать, тогда вам нужно указать это самостоятельно.

Вы можете сделать это с помощью классов или идентификаторов, и это действительно не очень легко сделать, особенно если у вас большой SVG-файл.

Я делал нечто подобное здесь давным-давно https://codepen.io/rafaelcastrocouto/pen/xnclb

Обратите внимание, что для некоторых элементов я изменяю градиентный стоп-цвет вместо свойства fill, но в основном это та же идея.Я создал объект для отображения всех цветов, и это позволило мне удалить оператор if.

 ch[i].attributes['stop-color'].value="#"+colors[names[ncolor]][j];

Вы также можете перечислить все свои цвета во внешнем CSS и просто изменить имя класса корневого элемента SVG,но вам все равно нужно указать, что будет окрашено.