Применить случайный цвет к каждому пути без новой функции для каждого

Question

У меня есть SVG с кучей путей (rect здесь для простоты)

<rect id=1 x="0" y="100" width="100" height="100"/>
<rect id=2 x="120" y="100" width="100" height="100"/>
<rect id=3 x="240" y="100" width="100" height="100"/>

У меня есть фрагмент, который определяет мои цвета:

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;

---

Дело в том, что яесть несколько сотен путей в этом документе. Мне нужно применить рандомизацию к каждому пути, мой текущий процесс оставляет сотни строк кода.

Я ищу способ;

1. Не требуется уникальный идентификатор пути для каждого пути
2. Каждый раз вызывать функцию random_color для путибез создания нового для каждого пути, а затем применить его к этому пути.

Я действительно новичок в javascript и пробовал все, что знаю, но безрезультатно.

Answer 1

1. Не нужен уникальный идентификатор пути для каждого пути

Вам понадобится какой-то CSS-селектор, который будет соответствовать всем путям (и ничего больше). Я предоставил очень простую версию, и это все, что я могу сделать на данный момент, потому что вы не уточнили, как эти пути расположены в вашем HTML-документе.

Каждый раз вызывайте функцию random_color для пути, не создавая новый для каждого пути, а затем применяйте его к этому пути.

Как только вы решили # 1, это легко- выберите их все, переберите их и назначьте случайный цвет каждому.

var colors = ['red','yellow','green','blue','orange','purple','black','white'];

var allPaths = document.querySelectorAll('svg rect');

allPaths.forEach(function (path) {
    path.style.fill = colors[Math.floor(Math.random() * colors.length)];
});

<svg>
  <rect x="0" y="100" width="100" height="100"/>
  <rect x="120" y="100" width="100" height="100"/>
  <rect x="240" y="100" width="100" height="100"/>
</svg>