Hiding SVG Screen Elements

Question

I use D3 to render several hundred svg elements. However, only a few of them are visible at the same time in the viewport.

So, I thought that maybe I could improve performance by deleting those elements that are off the screen and recreate them when they scroll back to the view.

Is that a reasonable guess?

Are there any tools for such a thing?

Answer 1

If you are simply worried that they are invisible, you can create an instance of those that you do not need outside the borders of the element, and then put transform("translate(x, y)")them into view when you need them.

, , , ( , ) . .

Answer 2

, defs use . , "" , .

Answer 3

You can simply set the property to a displayvalue nonefor any SVG element that you want to hide.

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>

Run codeHide result