svgdotjs / svg.js

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

3 and 3.1 seem broken #1197

Closed sethborg closed 3 years ago

sethborg commented 3 years ago

3 and 3.1 do not work. Go to your example page and change the framework from 2.5.0 to 3.0.5 and open the beta console to see the error https://jsfiddle.net/dotnetCarpenter/vceakozz/

Also, at the top of the page of svgjs.com if you change the dropdown from 2.7 to 3.0 or 3.1 none of doc links work, for example https://svgjs.com/docs/3.1/elements/#svg-clippath

Fuzzyma commented 3 years ago

Major version jumps mean breaking changes. That mean you cannot just run your old code with the new version. And the docs work pretty nicely

sethborg commented 3 years ago

I got the 3.1 animating shapes along a path example working by changing SVG('drawing') to SVG().addTo('#drawing') and

rect.animate(8000, '<>').during(function(pos, morph, eased){
    var p = path.pointAt(eased * length)

to

rect.animate(8000).ease('<>').during(function(pos){
    var p = path.pointAt(pos * length)

but it doesn't get the pointAt with easing since apparently that option was removed from .during()

Any way you could update the examples in the v3 docs?

Also, I don't think you clicked the other link I posted because if you had you'd see it gives a 404 https://svgjs.com/docs/3.1/elements/ vs https://svgjs.com/docs/2.7/elements/

Fuzzyma commented 3 years ago

And where did you get that nonworking link from? I also can just give you a link which is a 404. About the tutorials: They are not up to date for 3.1 and unfortunately I am swamped with work. Easing is done through Easing controllers. Just create your own and get the eased position by passing in the position

sethborg commented 3 years ago

There's a dropdown on the top left of svg.js with the different versions. Change it to 3 or 3.1 and then scroll down to "There is more..."

These links are broken:

full support for opacity masks and clipping paths text paths, even animated element groups dynamic gradients and patterns

I'd update the examples for you but I'm still not sure how to get the eased position.