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

我想我不明白添加文本路径对文本对象有什么作用，因为看起来我应该能够 animate/transform 它的 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（悬停）

Snap.svg 带有文本路径的文本没有按预期进行动画处理

Snap.svg text with textpath does not animate as expected

javascript

jquery

svg

snap.svg