js svg 获取长度 宽度_啥是佩奇？SVG 线条动画告诉你

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

首先祝大家2019新年快乐，万事大吉，猪事顺利，阖家欢乐。

前面文章SVG 线条动画基础入门知识学习到了基础知识，现在来给大家讲讲如何制作SVG 制作复杂图形线条动画。

假如你有这样的一个gif，要用svg画出来，你能想到什么办法了？

上面这个 SVG 线条动画的路径 path ，如果自己手工一个点一个点定位调试画出来的话，估计你的累趴下(也不一定能搞定)。

下面我来告诉大家一个简单的方法，准备好工具。

使用 PS 导出路径

导入图片

用魔术棒or套索工具,选择区域

右击-->建立工作路径-->容差2个像素吧(可以用不同大小的容差多试几次，直到得到一个自己满意的路径。)。

好，这个时候，路径算是建立完成了，可以把图层的透明度设置为 0 ，就能清晰的看到路径长啥样：

好，到了 PS 中的最后一步，点击 文件-->导出-->路径到 illustrator ，看图，照着操作就好：

在 illustrator 中生成 SVG 文件

打开 AI ，打开刚刚用 PS 导出的 *.ai 文件。

可能你看到的是一片空白，别慌，使用ctrl+a全选，就能选中路径啦。

看到了吧，这上面有多少个点，太多，都不想数，所以手工画是不可能的啦。

OK，接下来就是调整画布大小，最好是路径左上角和画布左上角对齐，然后选中存储为 SVG 文件。

好，其实吧 AI 也没做什么，路径是使用 PS 生成的，为什么不直接用 PS 生成 *.svg 文件呢？因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径，这个就看设计师或者你对哪个工具更熟悉了。

获取 SVG 的 path 路径

把刚刚保存的 *.svg 路径的文件用浏览器打开，右键查看网页源代码：

这里的path就是我们要的路径了

运用动画

.container {  width: 400px;  margin: 20px auto; }  .yy {  stroke-width: 5;  stroke: #f987ae;  animation: lineMove 13s ease-out infinite; }  @keyframes lineMove {  0% {  stroke-dasharray: 0, 4891;  }  50% {  stroke-dasharray: 4891, 4891;  fill: rgba(0, 0, 0, 0);  opacity: 1;  }  100% {  stroke-dasharray: 4891, 4891;  fill: rgba(249, 135, 174, 1);  opacity: 0;  } }

这里的stroke-dasharray长度，可以通过js来获取

var obj = document.querySelector("path"); var length = obj.getTotalLength();  console.log(length); // 4890.61669921875

是不是很简单了？赶紧自己试试吧。

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”