Javascript 在chrome中隐藏/显示时重置svg元素

我有3个SVG

元素，代表一栋建筑的3个不同楼层。在底部，我有3个按钮在它们之间导航，可以执行简单的

hide（）

和

show（）

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

互动元素

我怎样才能防止这种情况？该脚本似乎正在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
  }
}

是的，这是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();

---

我发现这只是DOM中第一个将事情搞砸的SVG，所以我所做的是预先编写SVG，并将其大小设置为零，这样我就可以毫无问题地使用hide/show