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（悬停在上面）

带有textpath的Snap.svg文本没有按预期动画

1 个答案: