SVG 线条动画基础入门知识

前言

通常我们说的 Web 动画，其实包含了以下三大类：

1、CSS3 动画 2、javascript 动画（canvas） 3、html 动画（SVG）

3 种动画各有优劣，实际应用中根据情况作出取舍，本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

SVG 的历史和优势（W3C）

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比，使用 SVG 的优势在于：

1、SVG 可被非常多的工具读取和修改（比如记事本） 2、SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 3、SVG 是可伸缩的 4、SVG 图像可在任何的分辨率下被高质量地打印 5、SVG 可在图像质量不下降的情况下被放大 6、SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图） 7、SVG 可以与 Java 技术一起运行 8、SVG 是开放的标准 9、SVG 文件是纯粹的 XML 10、SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

SVG 是什么

可缩放矢量图形，即SVG，是W3C XML的分枝语言之一，用于标记可缩放的矢量图形。（摘自MDN）

上面代码中，先谈谈 svg 标签：

version：表示 <svg> 的版本，目前只有 1.0，1.1 两种
xmlns：http://www.w3.org/2000/svg 固定值
xmlns:xlink：http://www.w3.org/1999/xlink 固定值
xml:space：preserve 固定值，上述三个值固定，表示命名空间，当数据单独存在svg文件内时，这3个值不能省略
class：就是我们熟悉的 class 类选择器
width | height：定义 svg 画布的大小
viewbox：定义了画布上可以显示的区域，当 viewBox 的大小和 svg 不同时，viewBox 在屏幕上的显示会缩放至 svg 同等大小

有了 svg 标签，我们就可以愉快的在内部添加 SVG 图形了

SVG 基本形状

MDN Web 文档有基本形状的文档，建议去看看。包含矩形、圆形、椭圆、线条、多边形、折线等等。

好了，有了基本的了解，我们继续今天的话题，SVG 线条动画。

SVG 线条动画

先看看效果图，然后想想如果是你，该怎么实现这个效果了？

ok，像以前一样，我们先来解析一下（按步骤实现）： 1、svg画个按钮（基础形状-矩形） 2、矩形只保留下方底边 3、实现鼠标：hover事件动画效果

svg画个按钮

代码语言：javascript复制

<div class="button">
    <svg 
         viewBox="0 0 320 60" 
         version="1.1" 
         xmlns="http://www.w3.org/2000/svg"
    >
        <rect class="shape" height="60" width="320"></rect>
    </svg>
    <div class="hover-text">Web 秀</div>
</div>

添加样式

代码语言：javascript复制

.button {
    position: absolute;
    width: 320px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hover-text {
    position: absolute;
    line-height: 60px;
    width: 320px;
    top: 0;
    color: #1199ff;
    font-size: 28px;
    text-align: center;
    cursor: pointer;
}
.shape {
    fill: transparent;
    stroke-width: 4px;
    stroke: #1199ff;
}

button垂直水平居中、shape透明填充，边框宽度4px，边框颜色#1199ff。

也许你会对fill、stroke-width等属性有点懵，下面看看他们的描述：

fill：类比 css 中的 background-color，给 svg 图形填充颜色；
stroke-width：类比 css 中的 border-width，给 svg 图形设定边框宽度；
stroke：类比 css 中的 border-color，给 svg 图形设定边框颜色；
stroke-linejoin | stroke-linecap：设定线段连接处的样式；
stroke-dasharray：值是一组数组，没数量上限，每个数字交替表示划线与间隔的宽度；
stroke-dashoffset：则是划线与间隔的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

SVG 矩形只留底边

这里我们给按钮添加stroke-dasharray：

代码语言：javascript复制

.shape {
    ...
    stroke-dasharray: 160 520;
    stroke-dashoffset: -460;
}

SVG hover动画

代码语言：javascript复制

.button:hover .hover-text {
    transition: 0.5s;
    color: pink;
}

.button:hover .shape {
    -webkit-animation: draw 0.5s linear forwards;
    animation: draw 0.5s linear forwards;
}

@keyframes draw {
    0% {
        stroke-dasharray: 160 520;
        stroke-dashoffset: -460;
        stroke-width: 4px;
    }
    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
        stroke-width: 2px;
        stroke: pink;
    }
}

hover时，改变文字颜色，利用stroke-dasharray和stroke-dashoffset实现动画效果。

后续文章将会详述非规则图形，如何使用 PS AI 生成 path 路径，实现 SVG 动画，敬请期待。

svg flash css xml

0 人点赞