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

【问题标题】：svg elements reset on hide/show in chromesvg 元素在 chrome 中隐藏/显示时重置
【发布时间】：2023-03-22 07:22:01
【问题描述】：

我有 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
  }
}

【问题讨论】：

标签： javascript jquery google-chrome svg

【解决方案1】：

是的，这是 Chrome 的“功能”。 “显示：无”（包括 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();

【讨论】：

【解决方案2】：

我发现它只是 DOM 中的第一个 SVG 搞砸了，所以我所做的就是预先设置大小为零的 SVG，然后我可以毫无问题地使用隐藏/显示。

【讨论】：