马黑黑《textPath startOffset动画 》

醉美水芙蓉

属性 startOffset 用于定义 <textPath> 中的文本在指定路径上的起始位置，可以利用此属性令文本在路径上移动。但此属性不支持 CSS 设置，所以 @keyframe 动画不能使用，只能在 XML 代码中插入 <animate> 标签。看代码和效果：

<style>
    #msvg { border: 1px solid gray; }
    #msvg text { font: bold 30px Sans-serif; text-anchor: middle; fill: darkred; }
</style>

<svg id="msvg" widt="600" height="300" viewBox="-200 -100 400 200" xmlns="http://www.w3.org/2000/svg">
    <path id="tp" d="M -180 100 Q 0 -160,180 100" fill="none" stroke="none" />
    <text>
        <textPath href="#tp" >
            于无声处听惊雷
            <animate id="ani" attributeName="startOffset" from="120%" to="50%" dur="8s" repeatCount="1" fill="freeze" />
        </textPath>
    </text>
</svg>

重置 animate 动画

核心在 animate 代码行。里面的主要属性：

1. attributeName ：指明上层父元素参与动画的属性名称；
2. from ：动画开始值。这里设为 120%，令文字基本隐藏在路径右侧；
3. to ：动画终止值。这里设为 50%，令文本居中（需要配合 text-anchor，可以在 CSS 中设置）；
4. dur ：动画运行周期时长（带单位）；
5. repeatCount ：动画重复次数（indefinite 为永远重复）；
6. fill ：动画结束后的保持状态（freeze、remove）

animate 动画还有其它相关属性，这里未用上就不赘述了。

示例中可以重置动画，一并给出核心 JS 代码：

function resetAnimate() {
    const ani = document.getElementById('ani');
    setTimeout(() => ani.beginElement(), 0);
}

其中的 animateElement.beginElement() 方法是重新开始动画指令，终止动画可使用 endElement() 方法。