Паттерны фильтра SVG смешиваются случайным образом и снова используйте в качестве шаблона ⇐ Html

[Anonymous]

Я хочу смешать два шаблона SVG случайным образом внутри фильтра SVG и снова использовать их в качестве шаблона, чтобы заполнить элемент (единственный выходной прямоугольник). Мои шаблоны размером 12*12. JavaScript сначала рисует прямоугольники размера 12*12, затем заполняет каждый из них случайным рисунком, создавая смешанный результат. < /P>
Что -то не так со сценарием. Это код, который я попробовал, проблема в том, что они не смешиваются вместе, но заполняют все это одним из них, случайным образом меняется каждый раз, когда страница обновляется. Нет сообщений об ошибках. < /P>
Весь код HTML: < /p>


const mixedPattern = document.getElementById('mixed-pattern');

function getMixedPattern() {
const svgNS = "http://www.w3.org/2000/svg";

// Add rectangles of the patterns(12*12)
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", i * 3);
rect.setAttribute("y", j * 3);
rect.setAttribute("width", "3");
rect.setAttribute("height", "3");

// Randomly fill the rectangles
const randomFill = Math.random() < 0.5 ? "url(#dark_pattern)" : "url(#dark_pattern2)";
rect.setAttribute("fill", randomFill);

mixedPattern.appendChild(rect);
}
}
}

mixedPattern.setAttribute('href', getMixedPattern());< /code>





















< /code>
< /div>
< /div>
< /p>
Смешанный шаблон должен случайным образом выбирать один шаблон каждые 12*12, а затем заполнять элемент.
Надеюсь, он будет выглядеть как:
random Pattern < /p>
>

Подробнее здесь: https://stackoverflow.com/questions/795 ... tern-again