带有文本路径的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

我想我不明白在文本对象上添加textpath是做什么的，因为看来我应该能够在添加路径之前对它的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 （悬停在上方）