我有一个svg文件(世界地图),其中包含了用于形成每个国家的path,这些国家本身被分组到代表各大洲的g元素中 - 结构如下:
<svg id="worldmap" viewBox="100 0 8334 4171">
<g id="Asia" class="wm-cont">
<path id="AF" d="M5707.92,1390.83l-22.5, etc...
...
当点击一个大洲时,我希望能够将其放大,因此我编写了以下适用于亚洲的jQuery代码:
$(document).ready(function() {
$("#Asia").click(function() {
// hide all continents
$(".wm-cont").css("display", "none");
// show Asia
$("g.wm-cont#Asia").fadeIn();
// shift the continent into view
$("g.wm-cont#Asia").setAttribute("transform", "translate(-400,439) scale(0.032,-0.032");
});
});
我点击后没有任何反应,为什么?我尝试将选择器改为g#Asia和类似的选择器,但是没有任何变化。
非常感谢您提供的任何帮助。
更新
由于某种原因,现在这个问题已经解决:
$(document).on('click', '#Asia', function() {
alert("Asia");
});
虽然我没有改变svg的结构,但它依然有效。欢迎任何有关于为什么这个方法可以奏效的想法:-)
<g id="Asia>
包含了很多路径,这些路径本身有由CSS给定的填充值,所以区域并不为空。那是否仍然会有很大的差别呢? - marcusmerkel