2

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

2 回答 2

2

是的，这是 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();
于 2015-05-07T13:14:11.567 回答
0

我发现它只是 DOM 中的第一个 SVG 把事情搞砸了，所以我所做的就是在前面加上大小为零的 SVG，然后我可以毫无问题地使用隐藏/显示。

于 2020-09-17T22:29:52.367 回答