Я новичок в работе с 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 ;
}
