0

The coordinate value of x2,y2 getting from Database and x1,y1 is getting from Mouseoverevent using getBoundingClientRect().

x,y value of line element is working fine but x2,y2 is not working when changing the screen size.

x2(186) is coming from database, what i am doing currently is set the x2 value of 186/3. But the problem is when i am changing the screen size then manually change as 186/1.5 like that. x1-186 and y1-548 value stored in database.

let svg = document.getElementsByTagName('svg')[0];

$('table tr').hover(function(event) {

  let bound = svg.getBoundingClientRect();
  let style = getComputedStyle(svg);

  let paddingLeft = parseFloat(style['padding-left'].replace('px', ''));
  let paddingTop = parseFloat(style['padding-top'].replace('px', ''));

  let x = event.clientX - bound.left - svg.clientLeft - paddingLeft;
  let y = event.clientY - bound.top - svg.clientTop - paddingTop;

  if (event.x === undefined) {
    x -= parseFloat(style['border-left-width'].replace('px', ''));
    y -= parseFloat(style['border-top-width'].replace('px', ''));
  }

  let width = svg.width.baseVal.value;
  let height = svg.height.baseVal.value;


  if (x < 0 || y < 0 || x >= width || y >= height) {
    return;
  }

  console.log(x, y);


  var str = event.currentTarget.cells[2].innerHTML;
  str = str.substr(1, 18);
  var val = str.split(",");

  var x2 = val[0];
  (186)
  var y2 = val[1];
  (548)
  insertLine(x, y, x2 / 3, y2 / 3);
});

function insertLine(posX, posY, x2, y2) {

  let line = document.createElementNS("http://www.w3.org/2000/svg", 'line');

  line.setAttributeNS(null, 'x1', posX);
  line.setAttributeNS(null, 'x2', x2);
  line.setAttributeNS(null, 'y1', posY);
  line.setAttributeNS(null, 'y2', y2);
  line.setAttributeNS(null, 'stroke', 'rgb(255,0,0)');
  line.setAttributeNS(null, 'stroke-width', 1);

  $(line).attr("id", "line");
  $(line).attr("marker-end", 'url(#arrow)');

  $("line").remove();
  svg.appendChild(line);
}
Saba
  • 61
  • 9
  • Please take a look at this: [Click event coordinates in SVG](https://stackoverflow.com/questions/54799299/click-event-coordinates-in-svg) Especially take a look at the `function oMousePosSVG()`. You may want to use this function to get the x and y in your code – enxaneta Jul 05 '20 at 10:38
  • Thanks for replay enxaneta. But my problem is when i increase the screen size more than 150% , Line element is not increasing size over certain width.This is my scenario [link] (https://stackoverflow.com/a/39544480/5681336) – Saba Jul 05 '20 at 11:11
  • 1
    insertLine does not use y2 – Robert Longson Jul 05 '20 at 11:13

0 Answers0