获取鼠标在使用viewbox的svg上的位置

项目要求用户能够在svg图片上动态绘制矩形框，就需要获取鼠标在svg上的位置

1. 尝试直接用getBoundingClientRect()获取宽高，通过viewBox（x，y，width,hieght）里面的width和height去计算比例后，在与offsetX、offsetY相乘，虽然确实能绘制框，但是当svg图经过缩放后就不准确了，所以就记录一下，pass掉。

var pageScale = {
  x: viewBox.width/ thissvg.getBoundingClientRect().width,
  y: viewBox.hieght/ thissvg.getBoundingClientRect().height
 }
var pt = {
	x: e.offsetX * pageScale.x,
	x: e.offsetY * pageScale.y
}

2. 通过创建一个svg点，再传入鼠标事件的坐标，通过变换矩阵的方法，就可以获取svg坐标了，以下是代码， get √

// 返回转换后的svg坐标，evt: 鼠标事件，svg: 要传入的svg
cursorPoint(evt,svg){
  let pt = svg.createSVGPoint();
  pt.x = evt.clientX;
  pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
},

// vue使用示例
 <svg ... ref='mysvg' @mousedown='myMouseDown'>
myMouseDown (e) {
	let mysvg = this.$refs.mysvg 
	let pt = this.cursorPoint(e,mysvg)
	console.log(pt.x, pt.y) 
}

最后

以上就是乐观小熊猫为你收集整理的获取鼠标在使用viewbox的svg上的位置的全部内容，希望文章能够帮你解决获取鼠标在使用viewbox的svg上的位置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。