纯CSS实现帅气的SVG路径描边动画效果

1、SVG中有个比较重要的属性分支,名为stroke, 中文软件中称之为“描边”。**

stroke表示描边颜色。
这很有意思,名字不是stroke-color, 而就是单纯的stroke。 一般有如下类型值:none, currentColor, . none表示没有颜色,就是我们常规的颜色值。RGBA, HSBA都支持。
– currentColor略高深,我看了下官方文档,个人理解为:共享父级但不越过SVG元素的XML中color(style中的)值;可以让路径绘制的文字直接继承父标签的color颜色值。
– stroke-width 表示描边的粗细。
– stroke-linecap 表示描边端点表现方式。可用值有:butt, round, square, inherit。
– stroke-linejoin 表示描边转角的表现方式。可用值有:miter, round, bevel, inherit。
– stroke-miterlimit 表示描边相交(锐角)的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思,值越大,损耗越小。
stroke-dasharray 表示虚线描边。
可选值为:none, , inherit。其中,none表示不是虚线;为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为:, , inherit. 百分比值,长度值,继承。
– stroke-opacity 表示描边透明度。默认是1.

2、本文主要介绍的是:stroke-dasharray和stroke-dashoffset
一个特殊情况:
我们现在都试想一下,如果stroke-dasharray和stroke-dashoffset值都很大,超过了描边路径的总长度,会怎么样?

用中文解释就是,一根火腿肠12厘米,要在上面画虚线,虚线间隔有15厘米,如果没有dashoffset,则火腿肠前面15厘米会被辣椒酱覆盖!实际上只有12厘米,因此,我们看到的是整个火腿肠都有辣椒酱。现在,dashoffset也是15厘米,也就是虚线要往后偏移15厘米,结果,辣椒酱要抹在火腿肠之外,也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG,也就是直线看不见了。我们把dashoffset值逐渐变小,则会发现,火腿肠上的辣椒酱一点一点出现了,好像辣椒酱从火腿肠根部涂抹上去一样。这个就是svg动画描线的原理

3、CSS3 animation的支持
内联SVG的强大之处在于,其本身也是个HTML元素,能被CSS属性控制,处理传统的高宽定位、边框背景色等,SVG自身的一些特殊属性也能被CSS支持,甚至在CSS3 animation动画中。

于是,我们上面探讨的SVG描边动画效果能够轻松使用CSS3 animation实现,无需任何JavaScript,这就是一开始Demo页面的实现。
svg的path是在AI里面导出来的滴。

<svg version="1.1" id="a"  x="0px" y="0px"
     width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<path id="longer" class="path1"  fill="#FFFFFF" stroke="#E60012" stroke-miterlimit="10" d="M261.933,9.069L456,185l126.933,115.069l-104,105l-117,27l-223-6
    l-98-164l23.962-146l130.038-4l120,115l37,89l111-18l-36-81l-85-46l33,22.945l50,52.98l-13,29.075c0,0-40,26-107.138-126
    l-7.862-24.242h47c0,0,244.029,147.534,194,204.323c-75,85.134-411,7.567-263-41.621c148-49.189-386-319.727-148,49.188"/>
<path  fill="#FFFFFF" stroke="#E60012" stroke-miterlimit="10" d="M482,522"/>
</svg>

其CSS代码如下:(右边-描线)
通过改变stroke-dashoffset的值来实现描线的效果

.path {
stroke-dasharray: 10000;
stroke-dashoffset: 10000;
animation: dash 5s linear forwards infinite ;
}
@keyframes dash {
to {
   stroke-dashoffset: 0;//从10000变成0,
   }
}

其CSS代码如下:(左边)

.path1 {
    stroke-dasharray: 10;
    animation: dash1 5s linear forwards infinite;
}

@keyframes dash1 {
    to {
        stroke-dashoffset: 300;
    }
}

10000没有什么特殊含义,只是足够大,保证比比每个路径的长度大即可,你也可以是1500或者是1000,区别就是描边速度更快一点。

属性CSS3 animation的小伙伴应该一看就看出上面代码的含义的,5秒动画,stroke-dashoffset从1000到0. 描边动画形成。

以上CSS代码几乎可以通用。无论你的SVG路径多么复杂,都能以描边动画形式呈现。根据自己的测试,IE10+下没有动画效果,不是CSS不支持SVG的stroke相关属性,而是animation中不支持stroke相关属性的动画。

4、路径的长度
var path = document.querySelector(‘path’);
var length = path.getTotalLength();//借助来获取路径长度,从而设置css

5、参考文章
原文更加详细和通俗易懂,我们感谢原作者。
如果有侵权,请及时联系。

纯CSS实现帅气的SVG路径描边动画效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注