javascript座标_javascript-SVG坐标

sample output:

offset based on svg x:12 y:34

mouse click based on screen x:22 y:38

mouse coord based on svg x:10 y:4

当我单击左上角的矩形时,将生成以上示例输出.

据我了解,getScreenCTM接口提供了元素的转换矩阵(此处为svg).我把它作为第一行.第二行表示基于屏幕坐标的鼠标坐标.当我将转换矩阵应用于鼠标单击时,我希望该点将转换为svg坐标.该值是上面的第三行.我不确定这是正确的.矩形的y坐标为10,而单击事件仅在矩形内可用.那么基于svg的鼠标坐标怎么会低于10？

sdsd

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

var svgNS = svg.getAttribute('xmlns');

var pt = svg.createSVGPoint();

var el1 = document.getElementsByTagName('rect')[0];

var log_svgcursorPoint,

log_mouseclick,

log_mousecoord;

function svgcursorPoint(evt){

pt.x = evt.clientX; pt.y = evt.clientY;

var a = svg.getScreenCTM();

log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f;

var b = a.inverse();

return pt.matrixTransform(b);

};

(function(el){

el.addEventListener('mousedown',function(e){

log_mouseclick = "mouse click based on screen"+ " x:" + e.clientX +" y:" + e.clientY ;

var svgmouse = svgcursorPoint(e);

log_mousecoord = "mouse coord based on svg"+ " x:" + svgmouse.x +" y:" +svgmouse.y;

document.getElementById('op').innerHTML = log_svgcursorPoint + "
" + log_mouseclick + "
" + log_mousecoord;

},false);

})(el1);

解决方法:

标签：svg,javascript

来源： https://codeday.me/bug/20191208/2091517.html