Question

193

Draw rectangles dynamically in SVG

rated 0 times [ 196] [ 3] / answers: 1 / hits: 40388 / 12 Years ago, mon, october 8, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

soniap

Add To Favorites

Follow

Total Points: 626

Total Questions: 119

Total Answers: 110

Location: Palestine

Member since Tue, Jul 20, 2021

3 Years ago

answered 12 Years ago deanna · Accepted Answer

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