我在我的 html 中加载了一个 svg(这是我的 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>
当我点击鼠标并将鼠标移到我的 map 上时，我想知道鼠标的位置。
单击并移动 map 时，我想移动一个圆圈。
到目前为止，这是我的代码
<!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
>
最佳答案
您应该在对象顶部使用一个 div 来捕获事件。在这里，看看这个 fiddle ，它不是您需要正确的，而是展示了如何进行叠加。
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%;
}
关于javascript - 在svg中获取鼠标位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23897002/