图片转svg标注_jpg图片转换成svg文字路径动画的实例（附代码）

本篇文章给大家带来的内容是关于jpg图片转换成svg文字路径动画的实例(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近对svg动画很感兴趣，用svg css可以实现一些让人眼前一亮的效果，Ant Design 官网首屏就出现了svg动画，coding

官网首页也出现svg动画，也许在非前端人员看来效果很普通，但是在前端开发人员眼里，这种效果低调而又张扬！这和你做的jq

animate动画一比较，高下立判！你还要说什么？

能做成Ant Design那样的动画效果是我的目标，我想先做个简单点的效果，譬如这样的文字描边动画效果

怎么做的呢？

这张jpg是我的头像，最终呈现的效果就是以这张图为基础。

首先要在PS中将图的选区转换成路径

再将带路径的ps文件导出到Ai

需要注意的是，第二个字母的路径由两部分组成，外层一个大选区，里面一个小的选区，这里要选“窗口”→“路径查找器”，形状