svg文本路径动画：舞动的文字
<style>#mama { margin: 30px auto; text-align: center; position: relative; }
#mama input { width: 600px; }
</style>
<div id="mama">
<p><input id="outText" type="text" value="" placeholder="输入文字" /></p>
<p id="svgcode">
<svg width="600" height="400">
<defs>
<path id="tpath" d="M20 200 Q120 -40,300 200 T580 200">
<animate attributeName="d" values="M20 200 Q120 -40,300 200 T580 200;M20 200 Q120 440,300 200 T580 200;M20 200 Q120 -40,300 200 T580 200" dur="2s" repeatCount="indefinite" />
</path>
</defs>
<text font-size="60" fill="none" stroke="navy" stroke-width="2" dominant-baseline="middle">
<textPath id="txtpath" href="#tpath">花潮论坛--- - - - -></textPath>
</text>
</svg>
</p>
</div>
<p>SVG代码：</p>
<div class="hE"><pre id="pre"></pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
pre.textContent = svgcode.innerHTML;
outText.oninput = () => txtpath.textContent = outText.value;
</script>
设计要点：
（一）需要设计一个常规路径，该路径运行 animate 动画——改变路径的 d 属性值。路径将在 textPath 文本路径标签中引用；
（二）text 标签可以直接带文本，但要让文本运行动画，需要 text 的子元素 textPath 带出文字，textPath 标签 href 属性指向动画 path 路径。 由于文本是占位的，这类动画不能带太多的字数，否则后面的文字会看不到 天哪，路径也能动了。。{:4_199:}这效果好看，像树枝在随风飘呀飘。。 马黑黑 发表于 2024-10-6 17:47
由于文本是占位的，这类动画不能带太多的字数，否则后面的文字会看不到
试了好长的文字，其实那些字是在的，有时候飘到范围内还是可以看到。。 有趣，像一条蛇一下地舞动着。
输入那里也好牛啊，边输入就边显示着{:4_187:} 这个还是需要一定长度的才看得出起伏，太短的字符像是在转动。当然太长了就看不到了{:4_173:} >是大于号啊，也是刚知道呢{:4_173:} 改变路径就可以有这样的效果啊，太神奇了{:4_199:} 红影 发表于 2024-10-6 18:57
改变路径就可以有这样的效果啊，太神奇了
是的 花飞飞 发表于 2024-10-6 18:40
天哪，路径也能动了。。这效果好看，像树枝在随风飘呀飘。。
就像缺心眼导航重新规划路线一样，路线变了，车子行进的轨迹就变了 花飞飞 发表于 2024-10-6 18:41
试了好长的文字，其实那些字是在的，有时候飘到范围内还是可以看到。。
不好看的 红影 发表于 2024-10-6 18:46
有趣，像一条蛇一下地舞动着。
输入那里也好牛啊，边输入就边显示着
这是文本框 oninput 事件触发的，每一个输入都会对路径上的文档产生作用 红影 发表于 2024-10-6 18:47
这个还是需要一定长度的才看得出起伏，太短的字符像是在转动。当然太长了就看不到了
是的。svg对文本的处理不是强项，不过它好歹支持 红影 发表于 2024-10-6 18:50
>是大于号啊，也是刚知道呢
这是转义了。svg代码是自动生成的，它按 textContent 转义了一些符号，这些符号可能不是原始代码里的真面目。看懂就好。 马黑黑 发表于 2024-10-6 19:32
就像缺心眼导航重新规划路线一样，路线变了，车子行进的轨迹就变了
{:4_173:}这原理听起来这么简单，又怪怪的 花飞飞 发表于 2024-10-6 19:41
这原理听起来这么简单，又怪怪的
简单而不怪 马黑黑 发表于 2024-10-6 19:33
不好看的
说明这个小工具有个性，一点也不啰嗦 花飞飞 发表于 2024-10-6 19:42
说明这个小工具有个性，一点也不啰嗦
这个不算工具，是一种效果 马黑黑 发表于 2024-10-6 19:41
简单而不怪
那好，怪不简单的{:4_173:}