SVG_37_六一儿童节快乐-路径移动-火焰文字

最新推荐文章于 2023-06-03 16:25:53 发布

原创最新推荐文章于 2023-06-03 16:25:53 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SVG #火焰文字 #路径文字 #Xi说SVG #六一儿童节

SVG 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用SVG实现的六一特效，包括火焰背景、文字路径移动和点击渐变效果。通过textPath元素和animate标签，实现了动态文字沿路径移动的视觉效果。

六一了，做个简单特效。

说明：关于文章时效性问题，公众号是第一时效性的，会根据具体时间进行文章的发布，优快云里面的文章可能稍有延迟，因为我是一般周末抽出点时间，在这里发布。如想获取第一手文章，请关注公众号。

实现原理：利用了火焰背景特效、textpath文字引用路径、路径移动特效和点击后的一个渐变。

动态文字特效文章还有：

SVG_30_火爆的Xi说SVG与孔方兄在看火烧赤壁

SVG_31_温柔似水的Xi说SVG

文字路径移动特效：

知识点：

除了笔直地绘制一行文字以外， SVG 也可以根据 <path> 元素的形状来放置文字。只要在textPath元素内部放置文本，并通过其xlink:href属性值引用<path>元素，我们就可以让文字块呈现在<path>元素给定的路径上了。

如上，使用了textPath子标签时，需要写在text标签对儿之中。在defs定义好path，在textpath中，通过xlink:href="id"引用。同时使用animate定义了位移动画，动画控制的属性为startOffset，这里要注意。

这个与之前的一篇SVG_23_mpath标签_轨迹复用很相似，都是通过引用外部定义好的路径。

关键代码

  <defs>    <path id="MyPath"          d="M 100 200              C 200 100 300   0 400 100             C 500 200 600 300 700 200             C 800 100 900 100 900 100" />  </defs>  <text font-family="Verdana" font-size="42.5">    <textPath xlink:href="#MyPath" fill="url(#fire)">      六一儿童节快乐             <animate attributeName="startOffset" from="0" to ="830" begin="0s" dur="10s" repeatCount="indefinite"/>    </textPath>  </text>

至于点击后的一个渐变，使用的是animate控制透明度opactiy。