Паттерны заполнения 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>
Вот новый сценарий, который работает: < /p>


























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

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

mixedPattern.setAttribute("width", "120");
mixedPattern.setAttribute("height", "120");

for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
const rect = document.createElementNS(svgNS, "rect");
rect.setAttribute("x", i * 12);
rect.setAttribute("y", j * 12);
rect.setAttribute("width", "12");
rect.setAttribute("height", "12");

// 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>
< /div>
< /div>
< /p>
Добавить шаблон thrid (например, пример): < /p>






Подробнее здесь: [url]https://stackoverflow.com/questions/79581263/svg-fill-patterns-mix-randomly-and-use-as-pattern-again[/url]