如果容器被隐藏，则SVG-PanZoom不起作用
如果容器被隐藏，则SVG-PanZoom不起作用
提问于 2017-03-20 22:36:56
我在Pan Component中嵌入了一个SVG-Pan-Zoom实例。当活动选项卡更改时，前一个选项卡将使用display: none隐藏。切换回第一个选项卡(使用display: block再次显示)后，svgPanZoom实例处于不可用状态。我不太明白到底是怎么回事。
我只能在Google Chrome中重现这种行为。
我创建了一个示例来测试这一点：http://svgpan-example.bitballoon.com/
这是一个bug，还是我漏掉了什么？
回答 2
Stack Overflow用户
发布于 2017-03-21 04:50:55
它似乎是特定于浏览器的实现。在embed元素(或其父容器)上设置display: none时，浏览器很可能会卸载资源。删除display: none后-浏览器似乎正在重新初始化/重新加载资源。你可以基于两个事实看到这一点：
- 在开发人员工具的网络标签中，你可以看到当你显示元素
- 时，如果你改变了SVG内的元素(在检查器中)，在隐藏和显示之后，资源再次被加载-更改消失了。
svg-pan-zoom无法控制来自外部世界的SVG更改，因此这不是问题。一种解决方案是使用内联SVG (它们在隐藏/显示时对我很有效)，或者只是测试所有其他选项(object和img标签)。但是内联SVG始终是首选方法。
Stack Overflow用户
发布于 2017-03-24 01:37:50
带有display: hidden的对象将从DOM流中删除，因此在某些浏览器中此时不会有任何维度数据(宽、高)。我的解决方案可能有点做作，但是...我需要一个bootstrap模式的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42906409
复制相关文章
相似问题
腾讯云开发者
