textPath startOffset动画

马黑黑 · 发表于 2026-7-19 17:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

属性 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 代码行。里面的主要属性：

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

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

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

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

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

梦江南 · 发表于 2026-7-19 18:10

代码很神奇，注了一个符号，就不动了。

梦江南 · 发表于 2026-7-19 18:12

谢谢黑黑老师详细讲解textPath startOffset动画，学习了。

夕阳黄昏 · 发表于 2026-7-19 20:24

本帖最后由夕阳黄昏于 2026-7-19 20:35 编辑

<style>
@import url(https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap);
#mysvg { border: 1px dashed gray; }
#mysvg text { font: bold 30px 'Zhi Mang Xing'; text-anchor: middle; fill: darkred; }
</style>
<svg id="mysvg" widt="600" height="300" viewBox="-200 -100 400 200" xmlns="http://www.w3.org/2000/svg">
<path id="txtp" d="M -180 100 Q 0 -160,180 100" fill="none" stroke="none" />
<text>
<textPath href="#txtp" >
点击启动动画
<animate attributeName="startOffset" from="-20%" to="50%" dur="8s" begin="0;click" fill="freeze" />
</textPath>
</text>
</svg>

复制代码