我有一个SVG-Pan-Zoom实例嵌入在Tabbing-Component中。当活动选项卡更改时，前一个选项卡会隐藏，并显示display: none .切换回第一个选项卡(再次显示display: block(后，svgPanZoom 实例处于不可用状态。我真的不明白发生了什么。
我只能在谷歌浏览器中重现这种行为。
我创建了一个示例来测试这一点：http://svgpan-example.bitballoon.com/
这是一个错误，还是我错过了什么？
它似乎是特定于浏览器的实现。当您在embed元素(或其父容器(上设置display: none时，浏览器很可能会卸载资源。删除display: none后 - 看起来浏览器正在重新初始化/重新加载资源。您可以看到基于两个事实：
- 在
- 开发人员工具的"网络"选项卡中，可以看到在显示元素时再次加载资源
- 如果您在 SVG 内部更改元素(在检查器中(，则在隐藏和显示后 - 更改将消失。
svg-pan-zoom无法控制来自外部世界的SVG更改，因此这不是问题。一个解决方案是使用内联SVG(它们在隐藏/显示时对我有用(，或者只是测试所有其他选项(对象和img标签(。但内联 SVG 始终是首选方法。
一个带有 display： hidden 的对象从 DOM 的流程中删除，因此在某些浏览器中此时不会有任何维度数据(宽度、高度(。 我的解决方案可能有点恶作剧，但是... 我需要引导模式中的 SVG。 所以我把 svg 元素放在模态外的身体底部，设置可见性：隐藏。 然后在上面初始化了svgPanZoom。 然后将其(使用jQuery(移动到隐藏的模态中。 这为我解决了问题。
<div id="svgContainer" style="width: 400px; height: 400px;
border:1px solid black; padding:5px; overflow:hidden;
visibility: hidden"><svg>...</svg></div>