svg.js icon indicating copy to clipboard operation
svg.js copied to clipboard

Transform animation of the skewY will change the coordinates

Open simon-ritchie opened this issue 4 years ago • 1 comments

Bug report

Fiddle

https://jsfiddle.net/pd1u98nk/2/

Explanation

When I use the animation of the transform with skewY setting, the coordinates change. Conversely, skewX animation and no-animation skewY does not change the coordinates (expected behavior). Maybe skewY with animation does not work correctly.

Unexpected coordinates change with the skewY animation:

https://jsfiddle.net/pd1u98nk/2/

var canvas = SVG().addTo('#canvas').size('100%', '100%')

rect = canvas.rect(100, 100).move(100, 100).fill('blue')
rect.animate().transform({skewY: 50})

image

Expected coordinates (no-animation skewY updating):

https://jsfiddle.net/och3udyr/

var canvas = SVG().addTo('#canvas').size('100%', '100%')

rect = canvas.rect(100, 100).move(100, 100).fill('blue')
rect.skew(0, 50);

image

SkewX animation also works correctly (no coordinates change):

https://jsfiddle.net/pd1u98nk/3/

var canvas = SVG().addTo('#canvas').size('100%', '100%')

rect = canvas.rect(100, 100).move(100, 100).fill('blue')
rect.animate().transform({skewX: 50})

image

simon-ritchie avatar Oct 05 '21 13:10 simon-ritchie

rect.animate().transform({skewY: 50}) and rect.animate().skew(0, 50) also yield different results. very strange

Fuzzyma avatar Oct 05 '21 16:10 Fuzzyma