search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.14k stars 1.08k forks source link

There are performance problems in .rotate() #1091

Closed elewen closed 1 year ago

elewen commented 4 years ago

When I use .rotate() to draw 1000 sprites that can be rotated (the rotation angle is a natural number less than 4 times 90 °), the rendering time exceeds 60000ms, However, once I stopped adding rotation to them, the time to render 1,000 sprites dropped to less than 600ms, and the performance improvement reached 100 times. Since this feature is indispensable, how can I solve this problem?

svgjs v2.7.1 os: iMac macOS Cataline chrome v80.0.3987.132

Fuzzyma commented 4 years ago

Try version 3 of svg.js. However, rotating 1000 things at once migt always jitter because its just very much stuff to render. It should be way better with svg.js v3 anyway

elewen commented 4 years ago

Try version 3 of svg.js. However, rotating 1000 things at once migt always jitter because its just very much stuff to render. It should be way better with svg.js v3 anyway

I don't mean to make 1000 rotations of an element in one instant, but to set a rotation angle for every one more than 1000 elements respectively through a for loop. This is a very common requirement.

In addition, the latest test results show that when using svg.js to perform 3D transformation on a large number of elements, all transformation types (including but not limited to rotate, scale, skew, translate) have performance problems. This rendering time is unacceptable in my project , because in this situation my project can not be publish to users at all.

I will try to use svgjs v3 for a new round of testing. If this problem cannot be solved, I will have to consider re-selecting the technology. Actually, I don't want to give it up. After all, svgjs occupies a core position in my project. I have also been working on this project for half a year.

Fuzzyma commented 4 years ago

svg itself is bnot capable of 3d transformations. Please elaborate. Rotating an element is nothing more than setting an attribute on that element. So you can do that directly with the attr method if the rotate method is to slow. You can always "degrade" to more native approaches when svg.js itself becomes slow. However, rendering a huge amount of nodes in the dom is always slow. Thats why many projects switch to <canvas>