Динамически рисовать прямоугольники в SVG - программирование
Подтвердить что ты не робот

Динамически рисовать прямоугольники в SVG

Я хотел бы знать, как нарисовать 100 прямоугольников с SVG.

Я сделал один прямоугольник с этим кодом:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>

  <svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000">
    <rect x="50" y="50" width="50" height="50" fill="black" />
  </svg>

</body>
</html>

Мне хотелось бы нарисовать 100 прямоугольников одинакового размера, различного положения (например, 10 в строке и 10 строк). Как это сделать быстро? Некоторая петля?

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете заполнить экран следующим циклом:

var svgns = "http://www.w3.org/2000/svg";
for (var x = 0; x < 5000; x += 50) {
    for (var y = 0; y < 3000; y += 50) {
        var rect = document.createElementNS(svgns, 'rect');
        rect.setAttributeNS(null, 'x', x);
        rect.setAttributeNS(null, 'y', y);
        rect.setAttributeNS(null, 'height', '50');
        rect.setAttributeNS(null, 'width', '50');
        rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
        document.getElementById('svgOne').appendChild(rect);
    }
}

Если вам просто нужно 100 случайно размещенных квадратов, вы можете сделать:

for (var i = 0; i < 100; i++) {
    var x = Math.random() * 5000,
        y = Math.random() * 3000;

    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'height', '50');
    rect.setAttributeNS(null, 'width', '50');
    rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
    document.getElementById('svgOne').appendChild(rect);
}

jsfiddle для второго