svg文本描边动画
本帖最后由 马黑黑 于 2024-9-25 18:05 编辑 <br /><br /><style>.artbox { margin: 20px auto; }
.artbox > p { margin: 10px 0; font-size: 20px; }
.artbox mark { padding: 0 4px; background: lightblue; }
.tRed { color: red; }
</style>
<div class="artbox">
<h2>一、需要用到的核心属性</h2>
<p>（一）<span class="tRed">stroke-dasharray</span> ：描边线段数值列表，单值表示线段长度和线段间的间隔距离一样，双值时第一个数指线段长度第二个数指间隔距离，三值时，比如a b c，线段长度a、间隔距离b、线段长度c接着间隔距离a、线段长度b、间隔距离c然后从头再来，其他多值列表时，偶数值参考双值变化、奇数值参考三值变化，原理是按“线段·间隔·线段·间隔···”方式循环取数值列表值，值用完从头再循环数值。双值以上用空格或逗号隔开各值。</p>
<p>（二）<span class="tRed">stroke-dashoffset</span> ：描边线段偏移，表示线段与路径起点的偏移距离，支持几乎所有的svg内部可视元素。属性值为数值，正数表示正向偏移，负数表示反向偏移。</p>
<p>上述两个属性，第一个用来设置虚线，第二个用来设置虚线偏移。我们经常使用的CSS相抵路径运动来源于此，主要利用第二个属性加offset-path实现。svg文本标签没有path可用，所以需要第一个属性 <span class="tRed">stroke-dasharray</span> 来描述描边形态，再用第二个属性 <span class="tRed">stroke-dashoffset</span> 驱动描边偏移产生描边动画。</p>
<h2>二、纯svg方式文本描边动画的实现</h2>
<p>以下是效果和代码，后边略做解释：</p>
<div class="hE"><pre>
<svg width="500" height="120" viewBox="-125 -30 250 60">
<text x="0" y="18" fill="none" stroke="teal" stroke-width="2" stroke-dasharray="60 10" font-size="50" font-weight="bold" text-anchor="middle">
花潮论坛
<animate attributeName="stroke-dashoffset" from="-70" to="0" dur="2s" begin="0s" repeatCount="indefinite"/>
</text>
</svg>
</pre></div>
<div class="resbox"></div>
<p>首先注意svg的宽高和viewBox属性设置的关系：它们按照2:1的方式设计+坐标系右下位移便于定位，需要说明的是，我们是在viewBox中作画，所以30的字体大小会放大一倍，其他数值很多依此类推。其次是动画的核心内容：<span class="tRed">text</span>标签做了常规属性设置，其中的<mark>stroke-dasharray="60 10"</mark>设置的是文本描边的线段样式；<span class="tRed">animate</span> 标签中的 <span class="tRed">stroke-dashoffset</span> 偏移范围从（from）-70 到（to）0 之间循环往复变化，from 的值应设置得当，动画的头尾衔接才相对正常。</p>
<h2>三、使用CSS实现svg文本描边动画</h2>
<p>CSS对svg的支持度很高，试看下面使用CSS实现上例效果的演示：</p>
<div class="hE"><pre>
<style>
.text {
fill: none;
stroke: teal;
stroke-width: 2;
stroke-dasharray: 60 10;
font-size: 50px;
font-weight: bold;
text-anchor: middle;
animation: textstroke 2s linear infinite;
}
@keyframes textstroke {
from { stroke-dashoffset: -70; }
to { stroke-dashoffset: 0; }
}
</style>
<svg width="500" height="120" viewBox="-125 -30 250 60">
<text class="text" x="0" y="18">花潮论坛</text>
</svg>
</pre></div>
<div class="resbox"></div>
<p>这里，CSS设计了一个 .text 选择器，它将svg的text标签里的属性除了x、y之外都设置了，并加上一个<span class="tRed">animation</span>属性调用 <span class="tRed">@keyframes</span> 设计的名为 <span class="tRed">textstroke</span> 的CSS动画。CSS动画也是通过 <span class="tRed">from</span> 和 <span class="tRed">to</span> 描述 <span class="tRed">stroke-dashoffset</span> 的数值变化；CSS还可以使用百分比描述动画过程不同阶段的数值变化，功能等同于svg的 values 属性。</p>
<p>svg动画和CSS动画到底用哪一个好？由于CSS天然启用设备的GPU进行加速，动画的执行性能更为卓越，一般的建议是，对复杂动画而言，能用CSS实现的动画就尽量使用CSS动画，实在不行的就用svg动画；简单动画则无需考虑什么，哪个更上手就用哪一个。</p>
</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);
var resboxes = document.querySelectorAll('.resbox'), pres = document.querySelectorAll('pre');
resboxes.forEach((resbox,key) =>{
resbox.innerHTML = pres.innerText;
});
</script>
https://img.cjyun.org/a/10085/201801/cf20aca3083ad28dbd1c19ace5278690.gif
这个讲解十分详细，描边字也极漂亮，太棒了！ 看起来还是svg的代码更渐变呢。 这个文字效果有点像蚂蚁字，但又不一样 这个SVG动画可以封神了，又简洁，效果又好看。。。
保存为SVG图片后用途多多，想想就乐，超级好用。。{:4_173:} 红影 发表于 2024-9-25 19:42
这个讲解十分详细，描边字也极漂亮，太棒了！
字体也很重要。这个没有设置字体，貌似使用了宋体 小辣椒 发表于 2024-9-25 20:26
这个文字效果有点像蚂蚁字，但又不一样
{:4_189:} 红影 发表于 2024-9-25 19:46
看起来还是svg的代码更渐变呢。
其实差不多的：属性差不多一样 花飞飞 发表于 2024-9-25 20:26
这个SVG动画可以封神了，又简洁，效果又好看。。。
保存为SVG图片后用途多多，想想就乐，超级好用。。{:4_ ...
保存为.svg文档时请注意 svg 标签的命名空间 马黑黑 发表于 2024-9-25 20:31
保存为.svg文档时请注意 svg 标签的命名空间
命名空间啥意思，命 名不是应该是规则么，.svg就行了 花飞飞 发表于 2024-9-25 20:37
命名空间啥意思，命 名不是应该是规则么，.svg就行了
其实我多次提到额 马黑黑 发表于 2024-9-25 20:38
其实我多次提到额
听你的我存成.svg上传它就能用了{:4_173:} 花飞飞 发表于 2024-9-25 20:42
听你的我存成.svg上传它就能用了
不是酱紫的。
.svg 文档要能正常运行，svg 标签的命名空间一点错都不能有。你可以随便看看我上传的任意一个，查看源码 马黑黑 发表于 2024-9-25 20:29
感觉漂亮是蛮漂亮的 是不是只要改那个汉字就可以了？ 马黑黑 发表于 2024-9-25 20:44
不是酱紫的。
.svg 文档要能正常运行，svg 标签的命名空间一点错都不能有。你可以随便看看我上传的任 ...
{:4_198:}
什么~~我去看看。。 马黑黑 发表于 2024-9-25 20:29
字体也很重要。这个没有设置字体，貌似使用了宋体
这个字体就挺漂亮了，主要这描边好看，怎么看都好{:4_187:} 马黑黑 发表于 2024-9-25 20:30
其实差不多的：属性差不多一样
代码的数量更少啊{:4_173:} 红影 发表于 2024-9-25 21:52
代码的数量更少啊
那不见得的，也是差不多的：只是CSS分行写每一个属性了。