隐藏屏幕SVG元素

我使用D3渲染数百个svg元素。但是，在视口中只能同时看到其中的几个。隐藏屏幕SVG元素

所以我想可能是我可以通过删除那些关闭屏幕并重新创建他们时，他们正在滚动回到视图元素获得的性能提升。

这是一个合理的假设吗？

是否有任何工具可用于这样的事情？

2015-05-08 Ofri

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

2015-05-08 23:43:57

感谢。我的目标虽然是减少dom元素的数量，并从我的理解使用“使用”仍然会呈现元素...... – Ofri

如果你只关心它们是不可见的，你可以实例化那些你不需要的元素，然后在你需要的时候将它们放到视图中。

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

2015-05-08 23:50:56

是的，这是有点我心中。你知道任何图书馆可能这样做吗？通过只保留可见的元素并删除那些不可见的元素来减少dom元素的数量？ – Ofri

@Ofri如果您可以将不想要的dom元素指定为与您希望可见的dom元素分开的元素（例如，给他们一个单独的类），则可以使用jQuery将其删除。 –

您可以将display属性正好被设置为none您想要隐藏的任何SVG元素。

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>

2015-05-09 10:12:53

我的目标是保存DOM的元素。将显示设置为'无'有助于提高性能？ – Ofri

对不起。我看到我没有正确地阅读你的问题。有可能'display：none'可能会有所帮助，但我希望大多数SVG实现都会检查一个元素是否在屏幕上。你可能会做很多工作，没有任何好处，或者甚至微不足道的成本。 –

回答