Erste Maus-position innerhalb des svg

Ich habe eine svg geladen in mein html so (das ist meine Karte)

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

Ich würde gerne wissen, die Position der Maus, wenn ich klicken Sie auf und bewegen Sie die Maus über meiner Karte.

Ich habe einen Kreis, dass ich mich bewegen will, wenn ich auf die Karte und fahren.

hier ist mein code bisher

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

>

InformationsquelleAutor Pieter de Vries | 2014-05-27
  1. 8

    Sollten Sie ein div-Element auf der Oberseite des Objekts zu fangen Ereignisse. hier, check out this fiddle, Es ist nicht genau das, was Sie brauchen, um Recht, sondern zeigt, wie man die overlay.

    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%;
}
    • Das funktioniert, aber ich möchte es zu aktualisieren, während die Maus bewegt sich nicht wenn ich die Maus nach oben.
    • Danke!!!!Sie half viel
    • Gut, ich bin froh. Ich vermute, Sie dachte, es sich aber, wenn Sie nicht, speichern Sie eine variable mit dem mousedown-Zustand wahr ist, dann nur die Aktualisierung der position der Maus auf mousemove-wenn dieser Staat ist wahr ist ein schöner Weg, es zu tun. Viel Glück! Wenn Sie könnten auch markieren der Antwort als die richtige Antwort wäre ich sehr dankbar.
    • Ich würde Stimmen, aber ich habe nicht 15 Ruf noch.
    • Das ist völlig in Ordnung, viel Glück mit Ihrem Projekt!
    • dies funktioniert nicht für mich. x:undefined, y:undefiniert

    InformationsquelleAutor Joseph Dailey
Schreibe einen Kommentar