爲什麼這段代碼不適用於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元素？

回答

相關問題