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

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

它与这个网站：

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

来源

2015-02-10 Adam Piper

它工作我，http://jsfiddle.net/j3nneh5z/（写入控制台的坐标） – panther 2015-02-10 08:55:10

在控制台我刚刚得到“NaN NaN” – 2015-02-10 08:59:05

奇怪的是，在Safari/Mac我得到了coords。这意味着任何浏览器都有问题。哪一个？ – panther 2015-02-10 09:00:46

按照CSSOM specification offsetLeft和的offsetTop是仅HTML属性并不适用于SVG元素。

Firefox正确执行此操作，但Chrome不支持。

你最好用getBoundingClientRect代替我的想法。

来源

2015-02-10 09:21:07

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

回答

相关问题