Question

我需要获取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元素），但是我尝试的所有操作都给我带来了“未定义”或什么都没有的感觉。有人知道我在做什么错吗？谢谢！

Answer 1

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

HTML / Javascript：获取圆形元素的X，Y坐标

1 个答案: