带有文本路径的 Snap.svg 文本未按预期设置动画

Question

我在使用 snap.svg 为文本设置动画时遇到问题。我正在围绕一个弧移动文本，从弧的左下角到它的顶点。我正在使用标准的 Snap.animate 功能及其内置的 setter 函数。

当我为一个随机元素（例如我在下面的示例中包含的圆圈）设置动画时，动画的行为符合预期。当我为纯文本制作动画时，它的行为也符合预期。但是，当我向该文本添加 textpath 属性时，动画的功能以我不理解的方式不同。

此文本按预期动画：

svg.text(0,200,'Regular Text').attr({'text-anchor': 'middle'});

示例（悬停动画）：http://codepen.io/anon/pen/pJbmYW

而此文本在其所需目的地附近停止（也是弧的顶部：

var path = 'M0 200 A 200 200, 0, 1, 1, 400 200';
svg.text(0,200,'Arced Text').attr({'text-anchor': 'middle',
                                   'textpath':path});

示例（悬停动画）：http://codepen.io/anon/pen/GJqaVp

我想我不明白添加文本路径对文本对象有什么作用，因为我似乎应该能够像在添加路径之前一样动画/转换它的 x 和 y 坐标。

欢迎任何见解或建议。谢谢。

Answer 1

我认为在这种情况下为 textPath 设置 x,y 动画并没有什么意义（我可能错了），因为这对于波动的线意味着什么。

我认为你想要的是为 startOffset 设置动画。比如……

 Snap.animate(0, arc.getTotalLength()/2,
    function(val){

        var point = arc.getPointAtLength(val);
        circ.attr({cx: point.x,
                   cy: point.y});
        arcText.textPath.attr({ startOffset: val})

     },1000,mina.easeinout);

这一点是主要的变化......

arcText.textPath.attr({ startOffset: val})

codepen（悬停）