摘要：于年月日成为推荐标准。注意绘制复杂的路径应尽可能借助设计工具，人为计算的属性耗时耗力，也不是目前的学习重点。动画方面，使用控制的属性来实现动画，这个属性可以将绘制为虚线。
原文链接
为了之后产品可能的动画需求，我们需要调研各种可行的前端动画技术。相信CSS3动画和JS动画我们平常已经接触很多了，而SVG技术则很少用，事实上SVG也是一种强大的动画解决方案，可以帮我们解决传统动画做不到的技术痛点。
SVG简介SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。
SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。
SVG本质上是用XML语言描述的，所以它可以和DOM结构一样被CSS和JS编程控制，通过连续地改变SVG图形属性就可以创建SVG动画。
SVG可用文本编辑器编辑，也可通过Adobe Illustator等专业编辑软件处理。
SVG文件可多带带使用，使用XML定义并包含DTD声明：
在现代浏览器中，我们可以直接在HTML代码中嵌入SVG代码：
SVG path
SVG可以绘制许多形状，这里不一一介绍，重点介绍下svg path，它是svg形状中功能最为强大的一个，也是我们前端动画会经常用到的形状。
顾名思义，path定义的是一组路径，你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是通过它的 d 属性决定的，d属性中通常以字母为命令，如下所示：
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepath
以下path 定义了一个三角形：它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。
注意：绘制复杂的path路径应尽可能借助设计工具，人为计算path的d属性耗时耗力，也不是目前的学习重点。
path的其他常用属性有：
stroke 定义路径颜色
stroke-width 定义路径宽度，单位像素
stroke-dasharray 用于创建虚线
fill 定义path闭合区域的填充颜色
基于svg path实现图片路径动画点击这里查看demo：
WPS Logo Demo
这个效果的实现并不复杂，首先我们需要wps logo的svg资源，可以借助photoshop 和 Adobe Illustrator 从图片中生成svg路径。
第一步，使用ps魔棒工具去除白色背景，并选中路径，然后右键，建立工作路径：
点击菜单-> 文件 -> 导出 -> 导出路径到ai ：
在ai中选中路径，存储为svg格式。然后在编辑器中打开svg即可查看到path的d属性了！
之后，在代码里创建svg图形，并指定其stroke-width等属性。
动画方面，使用css animation控制path的stroke-dasharray属性来实现动画，这个属性可以将path绘制为虚线。
如 stroke-dasharray: 10px 20px; 就定义了实线的长度是10px，空白的长度是20px，如下图所示：
利用这个原理，我们将实线的长度从0逐渐变为path总长度，将空白的长度逐渐变为0，就可以实现类似“绘图”的效果了~
#wps-logo-path {
animation: wpsLogo 3s ease-in-out forwards;
}
@keyframes wpsLogo {
0% {
stroke-dasharray: 0 1078px;
}
100% {
stroke-dasharray: 1078px 0;
}
}
path的总长度可以这样计算 $("#wpsLogoPath")[0].getTotalLength()
动画过程中，可以设置监听，在动画的不同阶段执行不同的钩子函数：
document.addEventListener("webkitAnimationEnd", function(e) {
}
代码中，我们还定义了线性渐变，用来填充path闭合区域内的背景值，fill: url(#wpslinear)
到这一步，svg path动画的demo就基本做完了，我们可利用这个原理实现更复杂的svg path动画，如多个path的过渡动画，物体沿不规则path移动等等。svg技术本身还是很复杂的，短时间掌握svg有一定的难度，必要时可以借助svg动画库实现需要的设计效果，做到技术灵活服务于产品。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109221.html
摘要：于年月日成为推荐标准。注意绘制复杂的路径应尽可能借助设计工具，人为计算的属性耗时耗力，也不是目前的学习重点。动画方面，使用控制的属性来实现动画，这个属性可以将绘制为虚线。 原文链接 为了之后产品可能的动画需求，我们需要调研各种可行的前端动画技术。相信CSS3动画和JS动画我们平常已经接触很多了，而SVG技术则很少用，事实上SVG也是一种强大的动画解决方案，可以帮我们解决传统动画做不到的...
摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...
摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...
阅读 3595·2023-04-26 02:24
阅读 930·2023-04-25 14:47
阅读 2473·2021-11-24 11:16
阅读 1707·2021-11-24 09:38
阅读 1570·2021-11-18 10:07
阅读 2059·2021-09-22 15:49
阅读 1588·2019-08-30 15:55
阅读 874·2019-08-26 13:38
