svg中的文本动画“跳跃”

Question

我对动画文本有疑问。我正在尝试将文本从左向右移动。并让文本在中间有一个小“停顿”，然后再次继续剩下的动画。

但是，我的文本每次在动画前后都会“跳跃”，它会向上或向下移动几个 px，然后再次到达我通过以下方式定义的正确高度：text2.animate(3000, '', 3200)。 move(1299, 220) - 当然这只是一个例子。

但是开始位置和结束位置都在同一高度上。所以我不明白为什么它“跳跃”。我希望你能帮我解决这个问题，因为它变得很烦人。

    var draw = SVG('animation').size(1299, 554)
    var nested = draw.nested()
    var line = draw.line(0, 260, 1299, 260).stroke({ width: 1 })

    var text2 = draw.text("The (jumping) bug")
    text2.move(0,220)

    text2.animate(7000, '', 1000).move(650, 220)
    .after(function moveTextR(){
    text2.animate(3000, '', 3200).move(1299, 220).after(function(){
        text2.animate(1, '', 2300).move(0, 220).after(function(){
            text2.clear()
            var tspan = text2.plain("something pink in the middle")
            text2.move(0,220)
            text2.animate(7000, '', 1000).move(650, 220).after(moveTextR)
        })
    })
})  
text2.font({
      family:   'Helvetica'
    , size:     32
    , anchor:   'start'
    , leading:  '1.5'
    , fill: '#000'
})

我还做了一个 jsfiddle：http://jsfiddle.net/HLA3b/

您可以看到它会跳转，尽管在 jsfiddle 中它只会在开始时跳转，而在 safari、chrome 和 firefox 上它会在每次开始新动画时跳转。

希望尽快得到有用的回复。

提前致谢！

Answer 1

这似乎是 svg.js 0.x 版本的一个错误，我已经修改了 jsfiddle 以使用更新的版本并且“跳转”没有发生。

http://jsfiddle.net/HLA3b/2/

由于 JSFiddle 中的外部资源链接，我使用 jQuery 添加了一个 onload 函数（未找到 SVG 对象），但除此之外，您的代码运行良好。

$(function() {

    var draw = SVG('animation').size(1299, 554)

(...)

    var text2 = draw.text('The (jumping) bug');
    text2.move(0,220)

    text2.animate(7000, '', 1000).move(650, 220).after(...)
})

我使用的版本是：1.0.rc3，这是我在CDN上找到的最新版本，但当前用于生产的版本是1.0rc6。