Svg.js: Animating TextPath seems broken

[dotnetCarpenter]

I'm trying to validate the TextPath examples.

Specifically text.textPath().animate(3000).attr('startOffset', 0.8) fails because SVG.FX doesn't seem to handle string names but only objects. https://github.com/svgdotjs/svg.js/blob/master/src/fx.js#L761

I also tried another approach, where I try to animate the path (which should use our new basic morph path feature) but since TextPath doesn't implement the array() method, this doesn't work either.

var draw = SVG("drawing")
  .viewbox(0, 0, 200, 140)
var text = draw.text(function(add) {
    add.tspan("We go up and down, then we go down, then up again")
})
text
  .path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
  .animate(500)
  .plot("M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80")

https://github.com/svgdotjs/svg.js/blob/master/src/fx.js#L854 will fail at this.target().array().morph(p)

Looking at our code coverage, it's no wonder since neither animating attr or animating plot is covered in any of our tests.
We might want to go through the SVG.FX module and add the missing tests in accordance with our documentation. But as usual, time is a huge factor :disappointed:

I will see if I can find some time to look into this but I haven't dug into this part of SVG.js before and don't have much time.

Any help is greatly appreciated :dancer: !

[RmiTtro]

I think I can help you out on this :raised_hand_with_fingers_splayed: . I was planing to work on the issues #547, #552 and #584 which are all in the SVG.FX module so I think I should be able to look this one up too. And since I played a lot with the SVG.FX module I think I'm the right man for the job :metal: !

[RmiTtro]

Hi everyone, I managed to work a bit on this issue and here is what I found :

First, I think we will have to replace, in the docs, this text.textPath().animate(3000).attr('startOffset', 0.8) by that text.textPath().animate(3000).attr('startOffset', '80%'). I found out in the SVG spec that percentage need to be passed as string for this attribute as this line explain :

If a \

Also, I just finished making textPath's plot method animable, this change will be on my next pull request that I should be releasing soon as I just need to add some test cases :wink:.

[wout]

I'm on it, I'll update the docs and include the required information from the SVG spec. Thanks for sorting that out.

[Fuzzyma]

Wasnt there a problem with SVG.Number which will happily convert a '50%' string to 0.5?

[wout]

Yeah, but in this case, 0.8 means 0.8px, and that might be one's intention. So converting 0.8 to 80% would be wrong.

[Fuzzyma]

I agree with that. But when somebody uses the animation could like animate().attr('startOffset', '50%') and the code converts the 50% to 0.5 this is also wrong. However iam not sure if this really happens but I have somewhere in my mind that there were a problem

[wout]

I'll check that. But that should not be the case. Numeric values are parsed to SVG.Number but the should keep their unit when converted back to a string...

[wout]

You're right. Something very wrong there:

https://jsfiddle.net/wout/6dprn8oq/

[RmiTtro]

It seem the changes I'm making will fix all those issues. I just tested the code in your fiddle with my current version of svg.js and it was working without issues. I also tested it with animate().attr('startOffset', '50%') and didn't notice any problems. So all's well that end wells :wink: .

[wout]

Fantastic! 💃🏾

[Fuzzyma]

This is now fixed with #589

[wout]

Should anything be changed in the docs?

[Fuzzyma]

Actually all that changes made were bugfixes on the fx module. Stuff now works better but not different.
There is a list of changes in the commit message (0f21fd2aead7b6c409d0fb36cce55c56e9529a1a).
A few methods were added which needs to be documented. Thanks for spotting that!

[wout]

Thanks!