文章/答案/技术大牛

发布

社区首页 >问答首页 >隐藏屏幕外的SVG元素

问隐藏屏幕外的SVG元素
EN

Stack Overflow用户

提问于 2015-05-09 07:39:18

回答 3查看 1.5K关注 0票数 4

我正在使用D3呈现几百个svg元素。但是，它们中只有几个在视口中同时可见。

所以我想，我可以通过删除那些屏幕外的元素，并在它们滚动回到视图中时重新创建它们，从而获得性能提升。

这是一个合理的假设吗？

对于这样的事情，有没有可用的工具？

d3.js

cloaking

performance

svg

回答 3

Stack Overflow用户

发布于 2015-05-09 07:50:57

如果你只关心它们是不可见的，你可以在元素的边界之外实例化你不需要的元素，然后在你需要它们的时候将它们transform("translate(x, y)")到视图中。

如果你不想让它们存在，除非你需要它们，那就把它们的属性(包括初始位置和任何你需要的东西)存储在一个对象数组中，并在屏幕上将它们实例化到它们的初始位置。这将提供更好的性能优势。

票数 2

Stack Overflow用户

发布于 2015-05-09 07:43:57

更一般地，看看元素或组重用的defs和use。例如，您可能会生成一个对象“池”，并应用平移将它们放置在视口内部或外部。

票数 1

Stack Overflow用户

发布于 2015-05-09 18:12:53

对于要隐藏的任何SVG元素，只需将display属性设置为none即可。

document.getElementById("unwanted").style.display = `none`;

<svg>
    <circle id="wanted" cx="50" cy="50" r="50" fill="red"/>
    <circle id="unwanted" cx="100" cy="100" r="100"/>
</svg>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30134364

复制

相似问题

问隐藏屏幕外的SVG元素
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏屏幕外的SVG元素EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏屏幕外的SVG元素
EN