Negative scale value in animation do not work properly.

[VincentSinel]

Bug report

When trying to animate a scale change with both xfactor and yfactor negative, they are animated as positive

Fiddle

https://jsfiddle.net/Laup8trq

Explanation

• What is the behaviour you expect? Like show in the fiddle, red triangle need to match the blue triangle.
• What is happening instead? The scale of the red triangle is considered as positive instead of negative

[Fuzzyma]

I debugged into this and the following is happening:

Since you use scale, an affine transformation is done. Because of how the system works, the transformation is converted to a matrix which is later decomposed back into the affine transformations. However, decomposition will always favor rotation over flipping and therefore the new affine transforms have a rotation instead of a negative scale.

But hey, why is it not rotating then? Thats because at some point we set the rotation of the target transform back to its original value which is 0 because you bever specified a rotation. So it gets totally lost.

Whats left is the scale which is then animated.

So now to "how do we fix this?" We probably need a check to make sure that decomposition has a flag that lets it favor flip instead of rotation. We could check if the target transform contains any flip or negative scale and set the flag accordingly.

This needs more work and i am not sure if i have the time to fix this. If you feel you can tackle this yourself, the code in question is in Runner.js

https://github.com/svgdotjs/svg.js/blob/b30f0d691dfec74bc855e5550970d0fb35931881/src/animation/Runner.js#L776

The decomposition which would need a flag is in Matrix.js

https://github.com/svgdotjs/svg.js/blob/b30f0d691dfec74bc855e5550970d0fb35931881/src/types/Matrix.js#L153

[Fuzzyma]

I just realized that all you basically want is to disable affine transformation. This is not possible via the scale api but you can just use transform directly:

poly.animate(1000).ease('<>')
        .transform({scale: -0.5, origin: [cx, cy]}, true, false)
        .loop(true, true, 1000)

https://jsfiddle.net/ykns86re/

This should unblock you

[VincentSinel]

Thanks for your quick reply, I don't think I will be able to help , I'm only a hobby programmer (without to much knowledge in JS) and use this library for my own website. But thank's a lot for your solution that just work great !

By the way this library is amazing !

[davelnewton]

Wondering if this is related to using a negative scale value, e.g., -1 to flip x coordinates not rendering the SVG correctly--comes out as 1 instead of negative one.