Javascript 获取svg中的鼠标位置
我在html中加载了一个svg，就像这样（这是我的地图）Javascript 获取svg中的鼠标位置,javascript,html,css,web,svg,Javascript,Html,Css,Web,Svg,我在html中加载了一个svg，就像这样（这是我的地图） 您的浏览器不支持SVG 当我在地图上单击并移动鼠标时，我想知道鼠标的位置。 单击并移动地图时，我有一个要移动的圆 这是到目前为止我的代码 <!DOCTYPE html> <html> <head> <title></title> <script src="svg-pan-zoom.js"></script> <script
您的浏览器不支持SVG
单击并移动地图时，我有一个要移动的圆 这是到目前为止我的代码
<!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
//不要在生产环境中这样使用window.onLoad，因为它只能侦听一个函数。
//用于固定鼠标x-y位置的临时变量
var tempX=0
var tempY=0
//检索鼠标x-y位置的主要功能
鼠标移动功能（evt）{
变量
tempX=evt.clientX，
tempY=evt.clientY；
警报（“hi”）
}
window.onload=函数（）{
createDevice（tempX，tempY，“计算机”，“良好”）；
createDevice（30，30，“电话”，“好”）；
createDevice（30,10，“平板电脑”，“坏”）；
};
//x和y是设备位置的坐标。
//确保设备为小写。
函数createDevice（x、y、设备、状态）{
svgPanZoom.init（“#Map”{
“zoomEnabled”：正确，
“ControlIConseabled”：true，
“setMinZoom”：100，
“setMaxZoom”：100，
"中":对,，
“适合”：正确
});
//在10,50处创建画布320×200
var paper=Raphael（x，y，320200）；
//在x=50、y=40处创建半径为10的圆
var循环=纸张循环（50,40,10）；
如果（设备=“计算机”）{
圆圈.attr（“填充”，“#0000FF”）；
}
如果（设备=“电话”）{
圆圈.attr（“填充”，“00FF00”）；
}
如果（设备=“平板电脑”）{
圆圈.attr（“填充”，“#FF00FF”）；
}
如果（状态=“良好”）{
//将圆的笔划属性设置为白色
圆圈.attr（“笔划”、“绿色”）；
}
如果（状态=“坏”）{
//将圆的笔划属性设置为白色
圆圈.attr（“笔划”、“橙色”）；
}
如果（状态=“死亡”）{
//将圆的笔划属性设置为白色
圆圈。属性（“笔划”、“红色”）；
}
}
您的浏览器不支持SVG
您应该在对象顶部使用div来捕捉事件。在这里，看看这把小提琴，它不完全是你需要正确的，但显示了如何做覆盖
HTML
CSS
这是可行的，但我希望它在鼠标移动时更新，而不是在我有鼠标时更新。很好，我很高兴。我猜你已经弄明白了，但是如果你没有弄明白，那么将mousedown状态的变量保存为true，然后仅在该状态为true时更新mousemove上的鼠标位置是一种很好的方法。祝你好运如果你也能将答案标记为正确答案，我将非常感谢。谢谢，如果你也知道如何获得负坐标，这样我就知道选择了什么。谢谢
<!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
<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>
$(document).ready(function () {
$("#map-catcher").mousedown(function (e) {
$("#coord").text("x:"+e.offsetX+", y:"+e.offsetY);
});
});
#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%;
}