隐藏屏幕 SVG 元素答案

【问题标题】：Hiding off screen SVG elements隐藏屏幕 SVG 元素
【发布时间】：2015-05-08 23:39:17
【问题描述】：

我正在使用 D3 渲染数百个 svg 元素。但是，它们中只有少数同时在视口中可见。

所以我想我可以通过删除那些不在屏幕上的元素并在它们滚动回视图时重新创建它们来提高性能。

这是一个合理的假设吗？

有什么工具可以做这样的事情吗？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您只需将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>

【讨论】：

我的目标是保存在 dom 元素中。将显示设置为“无”对性能有帮助吗？
对不起。我发现我没有正确阅读您的问题。 display: none 可能会有所帮助，但我预计大多数 SVG 实现都会检查元素是否在屏幕上。您可能会做很多工作而没有任何好处，甚至可能会付出一点点代价。