javascript - svg 元素在 Chrome 中隐藏/显示时重置

Question

我有 3 个 SVG <object>代表建筑物 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
  }
}

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();