Javascript 对每个路径应用随机颜色，而不对每个路径应用新函数

我有一个带有一系列路径的SVG（

rect

为了简单起见）

然后是将颜色随机化的片段

var random_color1 = colors[Math.floor(Math.random() * colors.length)];
var random_color2 = colors[Math.floor(Math.random() * colors.length)];
var random_color3 = colors[Math.floor(Math.random() * colors.length)];

然后，我有一个将随机颜色应用于每个路径（每个路径都有一个唯一的id）

---

问题是，我在这个文档中有几百条路径。我需要对每一条路径应用随机化，我当前的过程会留下数百行代码

我正在寻找一种方法来解决这个问题

每个路径不需要唯一的路径id

每次为路径调用

random\u color

函数，而不为每个路径创建新的路径，然后将其应用于该路径

我对javascript真的很陌生，我尝试了我所知道的一切，但都没有用

每个路径不需要唯一的路径id

您将需要某种CSS选择器来匹配所有路径（而不是其他路径）。我已经提供了一个非常简单的方法，这是我目前所能做的全部，因为您没有进一步阐述这些路径在HTML文档中的位置

每次为路径调用random_color函数，而不为每个路径创建新函数，然后将其应用于该路径

一旦你解出了#1，这就很容易了——把它们全部选出来，迭代，然后给每一个分配一个随机的颜色

var colors=[‘红色’、‘黄色’、‘绿色’、‘蓝色’、‘橙色’、‘紫色’、‘黑色’、‘白色’]；
var allpath=document.querySelectorAll（'svg rect'）；
forEach（函数（路径）{
path.style.fill=colors[Math.floor（Math.random（）*colors.length）]；
});

您还可以弹出颜色。不要在颜色上重复。函数（路径）{const index=Math.floor（Math.random（）*colors.length）；const color=colors[index]；colors.splice（index，1）；path.style.fill=colors[color]；}）@xdeepakv显然他们是在对100个元素做这个，我猜他们没有准备100种不同的颜色，所以我想他们会允许重复，但是谢谢。顺便说一下，id的第一个字符不应该是数字。例如，CSS无法匹配数字ID。
var colors = ['red','yellow','green','blue','orange','purple','black','white'];

var random_color1 = colors[Math.floor(Math.random() * colors.length)];
var random_color2 = colors[Math.floor(Math.random() * colors.length)];
var random_color3 = colors[Math.floor(Math.random() * colors.length)];

document.getElementById('1').style.fill = random_color1;
document.getElementById('2').style.fill = random_color2;
document.getElementById('3').style.fill = random_color3;