21

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?

2
  • Is using a library an option, or do you want to do this with straight JavaScript? Oct 8, 2012 at 17:47
  • 1
    Using a library for this would be complete overkill
    – saml
    Oct 8, 2012 at 18:03

1 Answer 1

39

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

2
  • It stupid but, could you show me how whole code should look?? Oct 8, 2012 at 18:47
  • I have one more q? What if i want just 100 squares - 10 squares in 10 rows?? Oct 8, 2012 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.