隱藏屏幕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實現都會檢查一個元素是否在屏幕上。你可能會做很多工作，沒有任何好處，或者甚至微不足道的成本。 –

回答