0

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

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

我创建了一个示例来对此进行测试：http ://svgpan-example.bitballoon.com/

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

4

2 回答 2

0

带有 display: hidden 的对象从 DOM 流中移除，因此在某些浏览器中此时不会有任何尺寸数据（宽度、高度）。我的解决方案可能有点做作，但是......我需要一个引导模式中的 SVG。所以我把svg元素放在了modal外面的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>
于 2017-03-23T17:37:49.997 回答
0

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

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

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

于 2017-03-20T20:50:55.007 回答