Draw rectangles dynamically in SVG

Question

I would like to know how to draw 100 rectangles with SVG.

I made one rectangle with this code:

<!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>

I woukd like to draw 100 of rectangles with same size, different position (like 10 in row and 10 rows). How to do it fast? Some loop?

Answer 1

You can fill the screen with the following loop:

 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,'width','50' ); rect.setAttributeNS( null,'height','50' ); rect.setAttributeNS( null,'fill','#'+Math.round( 0xffffff * Math.random()).toString(16) ); document.getElementById( 'svgOne' ).appendChild( rect ); } }

 body{overflow:hidden; margin:0; } svg{width:100vw; height:100vh;}

 <svg id='svgOne'></svg>

If you just want 100 randomly placed squares, you could do:

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, 'width', '50');
  rect.setAttributeNS(null, 'height', '50');
  rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
  document.getElementById('svgOne').appendChild(rect);
}

jsfiddle for the second one

Draw rectangles dynamically in SVG

Question

1 answers

solution1
35 ACCPTED 2012-10-08 17:52:31

Draw rectangles dynamically in SVG

Question

1 answers

solution1 35 ACCPTED 2012-10-08 17:52:31

solution1
35 ACCPTED 2012-10-08 17:52:31