HTML / Javascript:获取圆形元素的X,Y坐标

时间:2018-11-04 01:04:10

标签: html javascript

我需要获取Javascript中HTML圆元素的X和Y坐标。这是我的HTML代码:

    <svg id="hotspot_canvas" name="hotspot_canvas" class="hotspot" width="800" height="1570.66666667" style="background-image: url('images/characters/fullbody/1.jpg'); background-size: 800px 1570.66666667px;">
        <circle class="hotspot" id="hotspot0" name="hotspot0" cx="300" cy="75" r="50" href="javascript:void(0);" onclick="MovePopup('0', 200, 200);" onmouseover="MovePopup('0', 200, 200);" onmouseout="MovePopup('0', 200, -1000)" alt="" />
    </svg>

在我的MovePopup Java子例程中,我有以下代码:

function MovePopup(id, xcoord, ycoord) {
    var hotspot = document.getElementById('hotspot' + id);
    window.alert('Hotspot is ' + hotspot.style.left + ' pixels from the left of the window');
}

我需要的是从整个窗口的左侧获取像素数(不仅仅是SVG元素),但是我尝试的所有操作都给我带来了“未定义”或什么都没有的感觉。有人知道我在做什么错吗?谢谢!

1 个答案:

答案 0 :(得分:0)

尝试使用hotspot.cx和hotspot.cy。现在添加canvas元素的位置以获得相对于窗口的药水。