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

textPath startOffset动画

<style>
    @import 'https://638183.freep.cn/638183/web/css/hl.css';
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 2px 6px; background: #ccc; }
    .artBox pre { white-space: pre-wrap; }
    .artBox p { margin: 10px 0; }
    .tMid { text-align: center; }
</style>

<div class="artBox">
    <p>属性 <mark>startOffset</mark> 用于定义 <mark>&lt;textPath&gt;</mark> 中的文本在指定路径上的起始位置，可以利用此属性令文本在路径上移动。但此属性不支持 CSS 设置，所以 @keyframe 动画不能使用，只能在 XML 代码中插入 <mark>&lt;animate&gt;</mark> 标签。看代码和效果：</p>
   
    <pre id="codePre" class="hlCode">&lt;style&gt;
    #msvg { border: 1px solid gray; }
    #msvg text { font: bold 30px Sans-serif; text-anchor: middle; fill: darkred; }
&lt;/style&gt;

&lt;svg id="msvg" widt="600" height="300" viewBox="-200 -100 400 200" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;path id="tp" d="M -180 100 Q 0 -160,180 100" fill="none" stroke="none" /&gt;
    &lt;text&gt;
      &lt;textPath href="#tp" &gt;
            于无声处听惊雷
            &lt;animate id="ani" attributeName="startOffset" from="120%" to="50%" dur="8s" repeatCount="1" fill="freeze" /&gt;
      &lt;/textPath&gt;
    &lt;/text&gt;
&lt;/svg&gt;</pre>
   
    <div id="showRes" class="tMid"></div>
    <p class="tMid"><button onclick="resetAnimate()">重置 animate 动画</button></p>
    <p>核心在 animate 代码行。里面的主要属性：</p>
    <ol>
      <li>attributeName ：指明上层父元素参与动画的属性名称；</li>
      <li>from ：动画开始值。这里设为 120%，令文字基本隐藏在路径右侧；</li>
      <li>to ：动画终止值。这里设为 50%，令文本居中（需要配合 text-anchor，可以在 CSS 中设置）；</li>
      <li>dur ：动画运行周期时长（带单位）；</li>
      <li>repeatCount ：动画重复次数（indefinite 为永远重复）；</li>
      <li>fill ：动画结束后的保持状态（freeze、remove）</li>
    </ol>
    <p>animate 动画还有其它相关属性，这里未用上就不赘述了。</p>
    <p>示例中可以重置动画，一并给出核心 JS 代码：</p>
   
    <pre class="hlCode">function resetAnimate() {
    const ani = document.getElementById('ani');
    setTimeout(() => ani.beginElement(), 0);
}</pre>
   
    <p>其中的 <mark>animateElement.beginElement()</mark> 方法是重新开始动画指令，终止动画可使用 <mark>endElement() 方法。</p>
</div>

<script>
    showRes.innerHTML = codePre.textContent;
   
    function resetAnimate() {
      const ani = document.getElementById('ani');
      setTimeout(() => ani.beginElement(), 0);
    }
</script>

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

代码很神奇，注了一个符号，就不动了。{:4_187:}

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

谢谢黑黑老师详细讲解textPath startOffset动画，学习了。{:4_204:}

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

本帖最后由 夕阳黄昏 于 2026-7-19 20:35 编辑 <br /><br /><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; cursor:pointer;}
</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>

<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>

红影 发表于 2026-7-19 22:31

这个制作很漂亮，这个属性不支持 CSS 设置，嗯嗯，记下了{:4_187:}

马黑黑 发表于 2026-7-19 23:08

红影 发表于 2026-7-19 22:31
这个制作很漂亮，这个属性不支持 CSS 设置，嗯嗯，记下了

我测试过，应该不支持

马黑黑 发表于 2026-7-19 23:09

夕阳黄昏 发表于 2026-7-19 20:24
本帖最后由 夕阳黄昏 于 2026-7-19 20:35 编辑
@import url(https://fonts.googleapis.com/css2?family= ...

漂亮

马黑黑 发表于 2026-7-19 23:09

梦江南 发表于 2026-7-19 18:12
谢谢黑黑老师详细讲解textPath startOffset动画，学习了。

晚上嚎

马黑黑 发表于 2026-7-19 23:09

梦江南 发表于 2026-7-19 18:10
代码很神奇，注了一个符号，就不动了。
语法错误有时候是灾难性的

杨帆 发表于 2026-7-20 22:57

有趣的文字路径动画，谢谢马老师精彩讲授{:4_190:}

马黑黑 发表于 2026-7-21 19:41

杨帆 发表于 2026-7-20 22:57
有趣的文字路径动画，谢谢马老师精彩讲授

感谢支持

红影 发表于 2026-7-22 20:19

马黑黑 发表于 2026-7-19 23:08
我测试过，应该不支持

只能记住它了。

马黑黑 发表于 2026-7-25 21:07

红影 发表于 2026-7-22 20:19
只能记住它了。

嗯嗯

红影 发表于 2026-7-25 23:08

马黑黑 发表于 2026-7-25 21:07
嗯嗯

谢谢黑黑的讲解{:4_187:}

马黑黑 发表于 2026-7-25 23:55

红影 发表于 2026-7-25 23:08
谢谢黑黑的讲解

甭客气

红影 发表于 2026-7-26 21:43

马黑黑 发表于 2026-7-25 23:55
甭客气

这个是必须的啊{:4_173:}

马黑黑 发表于 2026-7-26 23:57

红影 发表于 2026-7-26 21:43
这个是必须的啊

还有这种说法？

红影 发表于 2026-7-27 21:28

马黑黑 发表于 2026-7-26 23:57
还有这种说法？

是啊，一个个人必须有感恩的心{:4_204:}

马黑黑 发表于 2026-7-27 21:52

红影 发表于 2026-7-27 21:28
是啊，一个个人必须有感恩的心

对，感恩之心得常有

红影 发表于 2026-7-29 21:49

马黑黑 发表于 2026-7-27 21:52
对，感恩之心得常有

所以，谢还是应该的{:4_187:}
页: [1] 2
查看完整版本: textPath startOffset动画