svg元素在chrome中显示隐藏/显示

Question

我有3个SVG <object>元素，代表建筑物的3个不同楼层。在底部，我有3个按钮可在它们之间导航，执行简单的hide()和show()。

当我加载页面时，脚本会在svg中设置一些交互式元素，但是当我使用导航按钮在楼层之间切换时，交互式svg元素会重置失去其功能。

互动元素

You can see the problem here

我该怎样防止这种情况？该脚本似乎正在使用firefox。

这是隐藏/显示楼层的代码。

function showMap(mapId){
  var map = (typeof(mapId)=="string")? $('#'+mapId) : $(mapId);
  if(!map.is(':visible')){
    maps.hide(); // hides all svg objects
    map.show();  // display the selected one
  }
}

Answer 1

是的，这是Chrome的“功能”。 “display：none”（包括css方式）完全破坏了与SVG的所有交互。 改为使用尺寸或位置：

jQuery.fn.weirdHide = function() {
    $(this).css("width", 0)
        .css("height", 0)
        .css("position", "absolute")
        .css("left", "-9999px");
}

jQuery.fn.weirdShow = function() {
    $(this).css("width", "")
        .css("height", "")
        .css("position", "")
        .css("left", "");
}

$("#map").weirdHide();
$("#map").weirdShow();

Answer 2

我发现这只是DOM中的第一个SVG弄乱了事情，所以我所做的是将SVG放在前面并且大小为零，这样我就可以毫无问题地使用hide / show了。