论坛 › 马黑黑教程专版 › svg文本路径动画：舞动的文字

红影 发表于 2024-10-7 11:44

马黑黑 发表于 2024-10-7 08:03
是的

不过还是字数多点的好看点。

马黑黑 发表于 2024-10-7 12:37

红影 发表于 2024-10-7 11:44
不过还是字数多点的好看点。

这叫多多益善？

马黑黑 发表于 2024-10-7 12:39

红影 发表于 2024-10-7 11:44
这个有趣。
这是应有的功能。过去没有 input 事件，要监听 change 事件，就是说，以前不能监听输入事件、只能监听内容改变事件，人们就想出用定时器实时监听输入情况。现在有了 input 事件，那就方便多了

马黑黑 发表于 2024-10-7 12:40

红影 发表于 2024-10-7 11:43
嗯嗯，看到当中线的变化了，那些文字都在线上

文字随路径，路径的设计决定了效果

红影 发表于 2024-10-7 13:06

马黑黑 发表于 2024-10-7 12:37
这叫多多益善？

比如那根线，就比文字好看，如果文字够长，均布在线上也好看啊{:4_173:}

红影 发表于 2024-10-7 13:09

马黑黑 发表于 2024-10-7 12:39
这是应有的功能。过去没有 input 事件，要监听 change 事件，就是说，以前不能监听输入事件、只能监听内 ...

可以做出各种漂亮的动态了。

红影 发表于 2024-10-7 13:10

马黑黑 发表于 2024-10-7 12:40
文字随路径，路径的设计决定了效果

看那个路径特别有趣，尤其，那根线像橡皮筋，那个大于符号还在橡皮筋上伸缩呢

红影 发表于 2024-10-7 13:11

<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"></animate>
                </path>
        </defs>
        <text font-size="60" fill="none" stroke="navy" stroke-width="2" dominant-baseline="middle">
                <textPath id="txtpath" href="#tpath">花潮论坛--- - - - -&gt;</textPath>
        </text>
        <use href="#tpath" fill="none" stroke="purple" />
</svg>

红影 发表于 2024-10-7 13:12

哦，我知道了，变成横直线时最短，所以大于号延伸了，倒路径最长的时候缩回来了，

查看完整版本: svg文本路径动画：舞动的文字