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

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

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

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