Question

当我将它设置为画布时，此代码运行良好。但是当我想在svg元素上使用它时，我什么也得不到。我想要做的是获取相对于画布的鼠标坐标，然后根据用户点击的位置绘制svg形状。

适用于此html：

<section class=chartArea>
    <canvas id=svg></canvas>
</section>

这个HTML不起作用：

<section class=chartArea>
   <svg id=svg></svg>
</section>

的javascript：

svg = document.getElementById("svg");

function relMouseCoords(event){
  var totalOffsetX = 0; //coordinates of corner of canvas
  var totalOffsetY = 0;
  var canvasX = 0;
  var canvasY = 0;
  var svg = this; //what called the event

  do{
      totalOffsetX += svg.offsetLeft - svg.scrollLeft; //relative coordinates
      totalOffsetY += svg.offsetTop - svg.scrollTop;
  }
  while(svg = svg.offsetParent)

  canvasX = event.pageX - totalOffsetX;
  canvasY = event.pageY - totalOffsetY;

  point = {x:canvasX, y:canvasY};

  console.log(canvasX + " " + canvasY);

  return point; //object returned
}

svg.addEventListener('mousemove', relMouseCoords);

Answer 1

根据CSSOM specification offsetLeft和offsetTop仅为html属性，对于SVG元素不存在。

Firefox正确实现了这一点，但Chrome没有。

我认为你最好使用getBoundingClientRect。

为什么这段代码不能用于svg元素？

1 个答案: