隐藏屏幕SVG元素

Question

我正在使用D3渲染数百个svg元素。但是，在视口中只能同时看到它们中的少数。

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

这是一个合理的假设吗？

是否有可用于此类工具的工具？

Answer 1

如果您只关心它们是不可见的，您可以实例化那些不需要超出元素界限的那些，然后在需要时transform("translate(x, y)")将它们放入视图中。

如果您不希望它们存在直到您需要它们，请将它们的属性（包括初始位置和您需要的任何其他内容）存储在对象数组中，并在屏幕上将它们初始化为实例。这将提供更好的性能优势。

Answer 2

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

Answer 3

您可以为要隐藏的任何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>