如果容器被隐藏，则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，还是我漏掉了什么？
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
复制相关文章
相似问题
腾讯云开发者
