在 svg 中获取鼠标位置答案

【问题标题】：Getting Mouse position within svg在 svg 中获取鼠标位置
【发布时间】：2014-07-16 19:31:58
【问题描述】：

我在我的 html 中加载了一个 svg（这是我的地图）

<div id="map1">
<object id="map" onmousedown="on_mouse_move(onmousemove)"  type="image/svg+xml" data="map.svg" style="width: 1400px; height: 700px; border:1px solid black; ">Your browser does not support SVG
</object>
</div>

当我在地图上单击并移动鼠标时，我想知道鼠标的位置。
当我点击并移动地图时，我想要移动一个圆圈。

这是我目前的代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="svg-pan-zoom.js"></script>
    <script src="control-icons.js"></script>
    <script src="raphael-min.js"></script>

    <script>



 // Don't use window.onLoad like this in production, because it can only listen to one function.


        // Temporary variables to hold mouse x-y pos.s
        var tempX = 0
        var tempY = 0

        // Main function to retrieve mouse x-y pos.s
        function on_mouse_move(evt) {
            var
             tempX = evt.clientX,
              tempY = evt.clientY;
            alert("hi")
        }

        window.onload = function () {

        createDevice(tempX, tempY, "computer", "good");
        createDevice(30, 30, "phone", "good");
        createDevice(30, 10, "tablet", "bad");

    };

        //x and y are the coordinates for the posistion od the device.
        //Make sure that the device is lowercase. 
    function createDevice(x,y,device,status) {
        svgPanZoom.init('#Map', {
            'zoomEnabled': true,
            'controlIconsEnabled': true,
            'setMinZoom': 100,
            'setMaxZoom': 100,
            'center': true,
            'fit': true
        });


        // Creates canvas 320 × 200 at 10, 50
        var paper = Raphael(x, y, 320, 200);

        // Creates circle at x = 50, y = 40, with radius 10
        var circle = paper.circle(50, 40, 10);

        if (device == "computer") {
            circle.attr("fill", "#0000FF");
        }

        if (device == "phone") {
            circle.attr("fill", "#00FF00");
        }

        if (device == "tablet") {
            circle.attr("fill", "#FF00FF");
        }

        if (status == "good") {
            // Sets the stroke attribute of the circle to white
            circle.attr("stroke", "green");
        }

        if (status == "bad") {
            // Sets the stroke attribute of the circle to white
            circle.attr("stroke", "orange");
        }

        if (status == "dead") {
            // Sets the stroke attribute of the circle to white
            circle.attr("stroke", "red");
        }

    }

    </script>

</head>
<body>
    <div id="map1">
        <object id="map" onmousedown="on_mouse_move(onmousemove)"  type="image/svg+xml" data="map.svg" style="width: 1400px; height: 700px; border:1px solid black; ">Your browser does not support SVG</object>
    </div>
   </body>
</html

【问题讨论】：

标签： javascript html css web svg

【解决方案1】：

您应该在对象顶部使用 div 来捕获事件。在这里，看看这个小提琴，它不完全是你需要做的，但它展示了如何做覆盖。

http://jsfiddle.net/Hc7x4/19/

HTML

<h1 id="coord"></h1>

<div id="map-container">
    <object id="map-svg" type="image/svg+xml" data="http://upload.wikimedia.org/wikipedia/en/9/9a/Nickelodeon_logo.svg" style="width: 300px; height: 300px; border:1px solid black; ">Your browser does not support SVG</object>
    <div id="map-catcher"></div>
</div>

$(document).ready(function () {
    $("#map-catcher").mousedown(function (e) {
        $("#coord").text("x:"+e.offsetX+", y:"+e.offsetY);
    });
});

CSS

#map-container{
    position:relative;
    width:300px;
    height:300px;
}
#map-svg{
    position:absolute;
    left:0px;
    top:0px;
}
#map-catcher{
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
}

【讨论】：

这行得通，但我希望它在鼠标移动时更新，而不是在我抬起鼠标时更新。
好，我很高兴。我猜你想通了，但如果你没有，保存一个mousedown状态为真的变量，那么只有当该状态为真时才更新mousemove上的鼠标位置是一种很好的方法。祝你好运！如果您也可以将答案标记为正确答案，我将非常感激。
谢谢，如果您也知道如何获得负坐标以便我知道选择了什么，那就太好了。谢谢