我正在努力创建交互式 map ，但遇到了一些障碍。我需要做的是基于在 SVG img 中单击的元素，应该出现一个工具提示窗口，其中包含有关该特定标记点的信息。
但现在，我什至无法获得任何标记来响应点击事件。下面是我正在使用的代码。一旦点击事件真正响应，我就会开始运行。我只是不知道为什么这个点击事件没有响应(结果变得非常沮丧)。
我已经通读了这篇 SO 帖子，希望了解为什么没有发生点击响应:Include SVG files with HTML, and still be able to apply styles to them?以及其他几个没有适用于这种情况的解决方案。 SVG 被正确内联，CSS 设置的悬停事件正在发生，只是没有发生的点击事件。任何帮助将不胜感激!
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>TITLE</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="{$url}/css/style.css">
<link rel="shortcut icon" href="{$url}/favicon.ico" type="image/x-icon">
<link rel="icon" href="{$url}/favicon.ico" type="image/x-icon">
</head>
<body>
<img src="{$url}/images/3d-map.svg" id="3d-map" class="svg">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{$url}/js/scripts.js"></script>
</body>
</html>
jQuery:
$(document).ready(function(){
/*
* Replace all SVG images with inline SVG
*/
$('img.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
});
$(window).load(function(){
$(".exchange-marker").bind('click', function(e){
console.log('clicked');
console.log($(this).attr('id'));
});
});
CSS:
.exchange-marker:hover{
stroke: #fabf23;
stroke-width: 3;
transition: all 0.3s;
}
SVG(为简洁起见被截断):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1400" height="1200" viewBox="0 0 1400 1200">
<g id="markers" fill="#2876BC">
<ellipse id="exchange-1" class="exchange-marker" cx="963.8" cy="853.7" rx="14.9" ry="4.8"/>
<ellipse id="exchange-2" class="exchange-marker" cx="929.3" cy="833.1" rx="14.9" ry="4.8"/>
</g>
</svg>
最佳答案
因此，解决方案归结为制定时间安排。通过简单地合并一个超时，我们能够让它对点击做出应有的响应。然后去参加比赛!
jQuery:
$(document).ready(function(){
initSVGMap();
});
function initSVGMap(){
var $img = $('img.svg');
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
setTimeout('initExchangePoints()', 1500); // THIS IS THE FIX
}
function initExchangePoints(){
$("ellipse").each(function(){
$(this).bind("click", function(){ console.log("Clicked " + $(this).attr("id")); });
});
}
关于jquery - 使用外部 JS 将点击事件绑定(bind)到内联 SVG 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40498978/