Javascript 如何在两个单独的SVG图像中填充多个相似的路径？

我正在制作一个网站，用户可以在其中与svg交互，并在单击时用颜色填充，我设法在单击时填充路径，但我目前遇到的问题是，有两个svg，当您单击svg1上的某些路径时，有时也需要填充svg2路径。我正在考虑向svg添加一些类，然后检查svg1路径是否与svg2路径具有相同的类，然后根据该条件填充两个路径。我想知道是否有更简单的方法。也不是所有的路径都应该填充相同的颜色，只有一些，我没有看到任何图案。我还考虑添加一些元数据，但这可能会使事情更加复杂。

---

这是我在vue组件中的挂载部分

如果如您所说，没有其他模式可以告诉您应该绘制什么，那么您需要自己指定它

您可以使用类或ID来实现这一点，但这并不是很容易做到，特别是如果您有一个大的SVG文件

很久以前我在这里也做过类似的事情

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

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

---

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

感谢您的回答，我想我将使用类，然后检查每个svg1路径是否与svg2路径具有相同的类，然后基于元素的条件集样式。我只是担心这么多的环形槽阵列是否会影响性能。答案中的链接在我制作时通常以每秒20帧的速度运行。现在它几乎是滞后的。我想浏览器在svg方面做得更好了。但是如果你的文件真的很大，我想你应该试试根元素CSS方法，因为它会使用更少的JS

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