Question

我在Tabbing-Component中嵌入了SVG-Pan-Zoom实例。当活动选项卡更改时，前一个选项卡将隐藏display: none。切换回第一个选项卡（使用display: block再次显示）后，svgPanZoom实例处于不可用状态。我真的不知道发生了什么。

我只能在Google Chrome中重现此行为。

我已经创建了一个示例来测试它：http://svgpan-example.bitballoon.com/

这是一个错误，还是我错过了什么？

Answer 1

它似乎是一个特定于浏览器的实现。当您在display: none元素（或其父容器）上设置embed时，浏览器很可能会卸载资源。删除display: none后，看起来浏览器正在重新初始化/重新加载资源。你可以根据2个事实看出这个：

在开发人员工具的网络标签中，您可以看到在显示元素时再次加载资源
如果您更改SVG内部的元素（在检查器中），隐藏和显示后 - 更改已消失。

svg-pan-zoom 无法控制来自外部世界的SVG更改，所以这不是问题。一个解决方案是使用内联SVG（它们在隐藏/显示时对我有用），或者只是测试所有其他选项（对象和img标签）。但内联SVG始终是首选方法。

Answer 2

具有display：hidden的对象将从DOM流中删除，因此在某些浏览器中此时不会有任何维度数据（宽度，高度）。我的解决方案可能有点笨拙，但......我需要一个自举模式的SVG。所以我把svg元素放在模态外的body的底部，设置visibility：hidden。然后初始化svgPanZoom就可以了。然后将它（使用jQuery）移动到隐藏模态中。这解决了我的问题。

    <div id="svgContainer" style="width: 400px; height: 400px; 
      border:1px solid black; padding:5px; overflow:hidden; 
      visibility: hidden"><svg>...</svg></div>

如果容器被隐藏，SVG-PanZoom不起作用

2 个答案: