Hacker News new | past | comments | ask | show | jobs | submit login

No, in our case they're all unique elements - unfortunately for me! That demo example is actually much smaller though (2k nodes).

Here's an example with over 150k nodes [1]. To be honest, we would normally doctor documents that had this many nodes to make the experience smoother for users. You'll notice that it's a bit sluggish when you zoom in and out, but panning is the same speed regardless of number of elements, and updating elements within the document is fast too.

[1] https://www.dropbox.com/s/xf89s2txvp9jb3k/Big%20SVG%20%28150...

performance degrades to <10fps above 2k nodes (2k random circles in an svg) for me regardless of browser

What are you doing with them? Animating them?

nothing - only changing the transform matrix on the root <g> for pan/zoom

Can you move it further up and are you using 3D?

do 3d css transforms make that much difference ?

You can use something like `transform:translateZ(0px)` to force a subsection of the dom to exist on its own rendering layer. Then you can transform the parent nodes and they'll move the lower layer around as if it were a static picture that they don't need to redraw. I'm not sure how well this works within an svg, but you can certainly use it to do your transformations outside the svg.

ok i dug out the project I was thinking of and I was wrong - performance is fine at 10k nodes. adding translateZ causes a slight delay after changing the transform matrix while it re-renders the bitmap, and you see the switch - thanks for the advice

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact