Javascript-форум - Криво отображается SVG через Javascript

Я новичок в работе с SVG. Никак не могу настроить отображение стрелок SVG через JAVASCRIPT в проекте. Если кто сталкивался помогите пожалуйста:
Вот пример:
http://love-live.ru/01082014_js_svg/
Код:

gentab(10,10,'contab','boxtab',
  [
  ['',1,2,3,4,5,6,7,8,9],
  [1,2,3,4,5,6,7,8,9,10],
  [2,3,4,5,6,7,8,9,10,11],
  [3,4,5,6,7,8,9,10,11,12],
  [4,5,6,7,8,9,10,11,12,13],
  [5,6,7,8,9,10,11,12,13,14],
  [6,7,8,9,10,11,12,13,14,15],
  [7,8,9,10,11,12,13,14,15,16],
  [8,9,10,11,12,13,14,15,16,17],
  [9,10,11,12,13,14,15,16,17,18]
  ]
  );
  
function gentab(x,y,co,oj,ar) {
  document.getElementById(oj).innerHTML = "";
  document.getElementById(oj).style.width = (parseInt(x) * 50) + (parseInt(x) * 1) + "px" ;
  document.getElementById(oj).style.height = (parseInt(y) * 50) + (parseInt(y) * 1) + "px";
  document.getElementById(co).style.width = (parseInt(x) * 51) + (parseInt(x) * 1)  +"px" ;
  document.getElementById(co).style.height = (parseInt(y) * 51) + (parseInt(y) * 1)  +"px";
  var t = 0;
  for(i=0; i<parseInt(y); i++) {
   for (k=0; k<parseInt(x); k++){
     var m = document.getElementById(oj).innerHTML;
	 
	 var stl = "";
	 if(k==0) {stl= 'stat';}
	 if(i==0) {stl= 'stat';}
     document.getElementById(oj).innerHTML = m + '<div class="tbl '+stl+' box'+i+'_'+k+'" pos="'+i+'_'+k+'"  onclick="act(this);" style="margin-left:'+parseInt((k * 51))+'px; margin-top:'+parseInt((i * 51))+'px;"><center>'+ar[i][k]+'</center></div>';
	 t++;
   }
  } 
  document.getElementById(oj).innerHTML = document.getElementById(oj).innerHTML + '<input type="hidden" id="xpos" value="0"/> <input type="hidden" id="ypos" value="0" />';
  document.getElementById(oj).innerHTML = document.getElementById(oj).innerHTML + '<div id="lines"></div>'; 
}

function act(r) { 
  var posact = $(r).attr('pos');
  var fact = $('#xpos').val();
  remc = posact.split("_");
  
  $('.tbl').removeClass('magic');
  $('.tbl').removeClass('indic');
  
  var xs = document.getElementById("xpos").value ;
  var ys = document.getElementById("ypos").value ;
  document.getElementById('lines').innerHTML  = "";
  var posx = 0;
  var posy = 0;
  
  if(remc[1] !== '0') {   $('.box0_'+remc[1]).addClass('indic');  document.getElementById("ypos").value = remc[1]; posy = remc[1];
  } else {   $('.box0_'+ys).addClass('indic');   posy = ys; }
  
  if(remc[0] !== '0') {   $('.box'+remc[0]+'_0').addClass('indic');  document.getElementById("xpos").value = remc[0]; posx = remc[0];
  } else {   $('.box'+xs+'_0').addClass('indic');  posx = +xs;  }
  
  $('.box'+posx+"_"+posy).addClass('magic');
  
  var svgX = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgsX" width="500" height="15" pointer-events="none" style="margin-top:'+parseInt(((posx)*51)+40)+'px"><path d="M5 5 L'+parseInt(((posy)*50)+47)+' 5 M40 5 L30 0 M40 5 L30 10" stroke-width="2" stroke="red"></path></svg>';
  var svgY = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgsY" width="15" height="500"  pointer-events="none" style="margin-left:'+parseInt(((posy)*51)+40)+'px"><path d="M5 5 L5 '+parseInt(((posx)*50)+47)+' M5 40 L0 30 M5 40 L10 30" stroke-width="2" stroke="red"></path></svg>';
//  M5 10 L5 495 M5 40 L0 30 M5 40 L10 30
  
  
  document.getElementById('lines').innerHTML = svgY + svgX ;
 
}