如何在两个单独的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

如果如您所说，没有其他图案可以告诉您应该绘画什么，那么您需要自己指定它。

您可以使用类或id来做到这一点，但这确实不是一件容易的事，特别是如果您的SVG文件很大。

很久以前我在这里https://codepen.io/rafaelcastrocouto/pen/xnclb

做过类似的事情

请注意，对于某些元素，我正在更改渐变停止色而不是fill属性，但这基本上是相同的想法。我制作了一个对象来映射所有颜色，并删除了if语句。

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

您还可以在外部CSS中列出所有颜色，只需更改SVG根元素的类名称，但仍然需要指定要绘制的颜色。