Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2014, 11:27
Новичок на форуме
Отправить личное сообщение для Ruslan_as Посмотреть профиль Найти все сообщения от Ruslan_as
 
Регистрация: 01.08.2014
Сообщений: 3

Криво отображается 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 ;
 
}
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2014, 11:53
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

А в чем проблема? У меня все норм: https://yadi.sk/i/l0sORVU8Yjymq
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2014, 12:07
Новичок на форуме
Отправить личное сообщение для Ruslan_as Посмотреть профиль Найти все сообщения от Ruslan_as
 
Регистрация: 01.08.2014
Сообщений: 3

Проблема в следующем:
Когда нажимаешь на самый первый результат 2 (пересечение 1 +1) угол линий прямой ровный законченный, а когда нажимаешь на результат 18 (пересечения 9+9 линии разрывны не до конца соединены). Можете помочь с расчетами уже запутался совсем
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2014, 12:08
Новичок на форуме
Отправить личное сообщение для Ruslan_as Посмотреть профиль Найти все сообщения от Ruslan_as
 
Регистрация: 01.08.2014
Сообщений: 3

Сообщение от ixth Посмотреть сообщение
А в чем проблема? У меня все норм: https://yadi.sk/i/l0sORVU8Yjymq
Проблема в следующем:
Когда нажимаешь на самый первый результат 2 (пересечение 1 +1) угол линий прямой ровный законченный, а когда нажимаешь на результат 18 (пересечения 9+9 линии разрывны не до конца соединены). Можете помочь с расчетами уже запутался совсем
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2014, 17:21
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,577

Ruslan_as,
var svgX = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgsX" width="505" height="15" pointer-events="none" style="margin-top:'+parseInt(((posx)*51)+40)+'px"><path d="M5 5 L'+parseInt(((posy)*51)+46)+' 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="505"  pointer-events="none" style="margin-left:'+parseInt(((posy)*51)+40)+'px"><path d="M5 5 L5 '+parseInt(((posx)*51)+46)+' M5 40 L0 30 M5 40 L10 30" stroke-width="2" stroke="red"></path></svg>';
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Не получается загрузить баннер в раздел DIV методами Javascript через iframe ((( autobuh Общие вопросы Javascript 3 24.07.2009 19:24
Замена текста в нутри страницы через JavaScript kqlek Общие вопросы Javascript 10 28.04.2009 23:33
Обращение к именам, полученным через Javascript baal1988 Events/DOM/Window 1 31.08.2008 15:08
Поиск в массиве через JavaScript Noran Общие вопросы Javascript 0 10.08.2008 17:31