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);
}