Svg.js: Animated move of text results in wrong y position.

[mtbradle-ge]

It seems that when moving text via an animation, the y position is wrong. It is different from the y position resulting from moving text without an animation.

See the following example:

window.draw = SVG('container').size(800, 600);

test = draw.text('Static Move Text').move(0,0);
test2 = draw.text('Animated Move Text').move(0,0);

console.log('Coordinates before regular move:', test.x(), test.y());
test.move(0,100);
console.log('Coordinates after regular move:', test.x(), test.y());

console.log('Coordinates before animated move:', test2.x(), test2.y());
test2.animate(1000).move(0,100).after(() => {
  console.log('Coordinates after animated move:', test2.x(), test2.y());
});

I first positioned both "Static Move Text" and "Animated Move Text" at the origin, then moved "Static Move Text" to (0, 100) and performed an animated move of "Animated Move Text" to the same coordinates (0, 100). After this operation both texts should be at (0, 100) and overlapping. But what we actually see is this:

The animated text is offset by 6.796875 for some reason. Why is this happening?

Tested in chrome and here is a working JSFiddle to show this issue in action.

https://jsfiddle.net/dcpznma7/

[Fuzzyma]

Mh that's odd. The animals function internally calls the move function so it should result in the same coordinates.

Can you please double check with the 3.0 branch?

[mtbradle-ge]

@Fuzzyma Yup, I see precisely the same behavior in the 3.0 branch.

[Fuzzyma]

Ok I just asked because we fixed a lot of issues by accident in the 3.0 branch.

Need to investigate that further...

[mtbradle-ge]

Any updates on this? I noticed that the y value seems to be different if you use the attr() method to obtain it. Could that be related?

window.draw = SVG('container').size(800, 600);

test = draw.text('Text').move(0,0);
console.log('text.y() =', test.y());
console.log("test.attr('y') =", test.attr('y'));

I see this in the console:

text.y() = 0
test.attr('y') = -5.796875

??

Fiddle: https://jsfiddle.net/bfakqaj1/2/

[JeffersonH44]

I have the same problem when I'm creating groups with custom svg's, the workaround that I did and works nice is this:

// to create a new group with a custom svg (svg param is a string)
function getGroup(ctx, svg) {
    var g1 = ctx.group();
    g1.svg(svg);
    var b = g1.rbox(ctx);
    // put it on 0, 0
    g1.move(-b.x, -b.y);

    return g1;
}

// to move an element
function move(elem, x, y) {
    elem.center(elem.x() + x, elem.y() + y);
}

[Fuzzyma]

This was fixed with #778. @momocow did some digging and found the bug. Credits to him!
The fix is live on master already