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
>
Share Improve this question asked May 27, 2014 at 18:59 Pieter de VriesPieter de Vries 8257 silver badges18 bronze badges1 Answer
Reset to default 8You 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%;
}