SVG 线条动画

VG 为何

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

上面代码中，先谈谈 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 中定义了两个 polyline 标签。

SVG 基本形状

polyline：是SVG的一个基本形状，用来创建一系列直线连接多个点。

其实，polyline 是一个比较不常用的形状，比较常用的是path，rect，circle 等。这里我使用 polyline 的原因是需要使用 `stroke-linejoin`[2] 和 `stroke-linecap`[3] 属性，在线段连接处创建圆滑过渡角。

SVG 中定义了一些基本形状[4]：

这是什么 CSS?怎么除了 animation 全都不认识?

莫慌，其实很多和 CSS 对比一下非常好理解，只是换了个名字：

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

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

上面，填充进度条，使用了下面这个动画 ：

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!