cuadricula-svg

by cesar nieto

HTML

<svg width=560 height=480>
<line x1=0 y1=80 x2=560 y2=80 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=0 y1=160 x2=560 y2=160 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=0 y1=240 x2=560 y2=240 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=0 y1=320 x2=560 y2=320 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=0 y1=400 x2=560 y2=400 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=80 y1=0 x2=80 y2=480 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=160 y1=0 x2=160 y2=480 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=240 y1=0 x2=240 y2=480 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=320 y1=0 x2=320 y2=480 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=400 y1=0 x2=400 y2=480 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
<line x1=480 y1=0 x2=480 y2=480 stroke="blue" stroke-width=1 stroke-linecap="butt"/>
</svg>

CSS

svg {
  border: solid 1px red;
}

JavaScript

// Coordenadas del svg
var X = $('svg').width();
var Y = $('svg').height();
var coordendas = [];
var coordenadaX = 4; 
var coordenadaY = 4;

while(coordenadaY < Y) {
  coordenadaX = 4;
  while(coordenadaX < X) {
    coordendas.push([coordenadaX,coordenadaY]);
    coordenadaX += 80;
  }
  coordenadaY += 80;
}

//console.log(coordendas);
// Fin coordenadas del svg

// inicio data
var data = [ ['','',0,'inicio',0,'inicio'], 
		[0,1,14,'documento',1,'inicio'],
    [1,2,16,'proceso',2,'C100'],
    [2,3,18,'si',3,'igual']
];
// fin data
 
// Lectura de data
	for(var i in data) {
  	var inData = data[i];
    var setLineas = lineas(inData[0],inData[1]);
    var setPosicion = setCoordenadasFigura(inData[2],inData[3],inData[4]);
    //console.log(inData);
  }
  
  // Conexion de figuras
  	function lineas(x,y) {
    		if(x != "" || y != '') {
        	console.log('no esta vacio');
        } else {
        	console.log('esta vacio');
        }
    }
  // Fin conexion de figuras
  
  // Posicion de las figuras
    function setCoordenadasFigura(i,figura,id) {
    	if(typeof i == 'number') {
      	var x = coordendas[i][0];
        var y = coordendas[i][1];
        switch(figura) {
        	case "inicio":
          	inicio(x,y,id);
            break;
          
          case "proceso":
          	proceso(x,y,id);
            break;
          
          case "documento":
          	documento(x,y,id);
            break;
          
          case "si":
          	si(x,y,id);
            break;
        }
      }
    }
  // Fin posicion de las figuras
// Fin de lectura de data

function inicio(x,y,id) {
	var newCircle = document.createElementNS('http://www.w3.org/2000/svg','circle');
  newCircle.setAttribute('id',id);
	newCircle.setAttribute('cx',x+36);
  newCircle.setAttribute('cy',y+36);
  newCircle.setAttribute('r','25');
  newCircle.setAttribute('fill','yellow');
  $("svg").append(newCircle);
}

function proceso(x,y,id) {
	var newSquare =...