admin管理员组

文章数量:1355535

I have an svg loaded in my html like so (this is my map)

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

I would like to know the location of the mouse when I click and move the mouse over my map.
I have a circle that I want to move when I click and move the map.

here is my code so far

<!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, "puter", "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 == "puter") {
            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

>

I have an svg loaded in my html like so (this is my map)

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

I would like to know the location of the mouse when I click and move the mouse over my map.
I have a circle that I want to move when I click and move the map.

here is my code so far

<!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, "puter", "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 == "puter") {
            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
Share Improve this question asked May 27, 2014 at 18:59 Pieter de VriesPieter de Vries 8257 silver badges18 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

You should use a div on top of your object to catch events. here, check out this fiddle, It's not exactly what you need to right but shows how to do the overlay.

http://jsfiddle/Hc7x4/19/

HTML

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

<div id="map-container">
    <object id="map-svg" type="image/svg+xml" data="http://upload.wikimedia/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%;
}

本文标签： javascriptGetting Mouse position within svgStack Overflow

版权声明：本文标题：javascript - Getting Mouse position within svg - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743952393a2567526.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。