8 ms·

that's not 100k unique elements though, it's 100k instances of a set of <100 unique elements using <use> isn't it ?

• aidos 9y ago
  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%28150k%29.gif?dl=0 https://www.dropbox.com/s/xf89s2txvp9jb3k/Big%20SVG%20%28150...
  • vbuwivbiu 9y ago
    performance degrades to <10fps above 2k nodes (2k random circles in an svg) for me regardless of browser
    • aidos 9y ago
      What are you doing with them? Animating them?
      • vbuwivbiu 9y ago
        nothing - only changing the transform matrix on the root <g> for pan/zoom
        • aidos 9y ago
          Can you move it further up and are you using 3D?
          • vbuwivbiu 9y ago
            do 3d css transforms make that much difference ?
            • aidos 9y ago
              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.
              • vbuwivbiu 9y ago
                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