获取SVG内鼠标位置

Question

获取SVG内鼠标位置

3

我在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

>

- Pieter de Vries

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joseph Dailey · Accepted Answer

你应该使用一个div覆盖在你的对象上来捕获事件。这里，可以看看这个fiddle链接，虽然不完全符合你的需求，但可以展示如何创建覆盖效果。

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>

JS

$(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%;
}