svg.js
svg.js copied to clipboard
svgdotjs
2.7 update to 3.0, Why I use new SVG.List([rect]) in the project will prompt me not to find the current List
This seems to be a typescript issue. Maybe it's fixed it master. You can give it a try by replacing the d.ts file with the current one
With respect to my stupidity, how can I use list instead of set? Is there something wrong with my writing
I write according to the document on the official website. Did I make a mistake? My code prompts me to report an error. import SVG, { SVG as A } from '@svgdotjs/svg.js'; const list = new A.List(); // It's not right const list = new SVG.List(); // It's not right
// 2.7 create a set and add the elements var set = draw.set() set.add(rect).add(circle)
// change the fill of all elements in the set at once set.fill('#ff0')
// 3.0c reate a set and add the elements var list = new SVG.List([rect]) list.push(circle)
// list[0] == rect // list[1] == circle
// change the fill of all elements in the set at once list.fill('#ff0')
- I did not see the List method in your source code, I only saw an interface!
- Did I make a mistake? I read the documentation and it says to use list instead of set, but now I don't know how to create a list.
3.0: 
2.7: 
- After I added additional text, my node position was automatically moved downward, which is not possible in 2.7. The used dy How can I use it now so that it will not push my node down?
Use stackoverflow to get these questions answered or try around a little bit. version 3 has breaking changes which are documented in the changelog. So not everything works as before
Anyway, thank you for your reply, I will take a closer look at the changes in 3.0 and 2.7
Use stackoverflow to get these questions answered or try around a little bit. version 3 has breaking changes which are documented in the changelog. So not everything works as before
I have a lot of nodes. There are 4000 when there are more than 500+. At this time, the page will be very lagging. I want to ask whether svg.js can be rendered into canvas or any good suggestions? Can improve performance. Our project is considering replacing svg.js with g6, but this is a huge project!
The dom is not particularly fast. If you overload it with nodes it becomes slower and slower. It doesn't matter how this nodes are created or which library does that. You can get around that by minimizing the changes you do in the dom and by avoiding repaints as much as possible. In one of my applications, I e.g. used css zoom instead of viewbox zoom because css is way faster. You can render any svg into a canvas by using a data string and setting it as source for the canvas. However, that doesn't necessarily make it any faster. The advantages of svg is that it handles all mouse interaction for you. Rendering on a canvas can be faster (especially if you don't have to rerender) but you have to implement all mouse interactions on your own.
The dom is not particularly fast. If you overload it with nodes it becomes slower and slower. It doesn't matter how this nodes are created or which library does that. You can get around that by minimizing the changes you do in the dom and by avoiding repaints as much as possible. In one of my applications, I e.g. used css zoom instead of viewbox zoom because css is way faster. You can render any svg into a canvas by using a data string and setting it as source for the canvas. However, that doesn't necessarily make it any faster. The advantages of svg is that it handles all mouse interaction for you. Rendering on a canvas can be faster (especially if you don't have to rerender) but you have to implement all mouse interactions on your own.
This problem has troubled me for a long time. When there are many nodes, the interaction performance is very bad. I saw an issue two days ago(https://github.com/antvis/G6/issues/1643), the plan inside, I don't know if it is. If the technology stack is changed to g6, it will be very time-consuming.