本篇文章给大家带来的内容是关于jpg图片转换成svg文字路径动画的实例（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
最近对svg动画很感兴趣，用svg+css可以实现一些让人眼前一亮的效果，Ant Design 官网首屏就出现了svg动画，coding 官网首页也出现svg动画，也许在非前端人员看来效果很普通，但是在前端开发人员眼里，这种效果低调而又张扬！这和你做的jq animate动画一比较，高下立判！你还要说什么？
能做成ant design那样的动画效果是我的目标，我想先做个简单点的效果，譬如这样的文字描边动画效果 
怎么做的呢？
这张jpg是我的头像，最终呈现的效果就是以这张图为基础。
首先要在PS中将图的选区转换成路径
再将带路径的ps文件导出到Ai
需要注意的是，第二个字母的路径由两部分组成，外层一个大选区，里面一个小的选区，这里要选“窗口”→“路径查找器”，形状模式选“差集”。
保存成svg格式，得到了代码：
- .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#30479B;}
登录后复制
将css修改一下
- .st0{fill: none; stroke-width:2; stroke:#30479B; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray: 250, 250; animation: lineMove 5s ease-out infinite; }@keyframes lineMove { 0%{ stroke-dasharray: 0, 250; } 100%{ stroke-dasharray: 250, 250; } }
登录后复制
关于svg和css相结合，以本示例为参考：
– fill 表示填充颜色，值是none表示没有颜色
– stroke 是边框的颜色
– stroke-width 定义边框的厚度
– stroke-dasharray 这个属性第一个参数定义了边框虚线长度，第二个参数是虚线的间距，什么是“边框虚线”，你可以认为边框本来就是虚线而不是实线，只不过虚线的间距为0，看起来就像是实线了。
– 这里用到了css3的@keyframes特性，将过渡动画控制stroke-dasharray 样式。
最终整体代码如下
- nbsp;html>
<span class="typ">Document</span> svg{width: 250px;height: 250px;} .st0{fill: none; stroke-width:2; stroke:#30479B; stroke-dasharray: 250; animation: lineMove 5s ease-out infinite; } @keyframes lineMove { 0%{ stroke-dasharray: 0, 250; } 100%{ stroke-dasharray: 250, 250; } }
登录后复制
相关文章推荐：
svg中的symbol如何制作icon
svg中的symbol如何制作icon
以上就是jpg图片转换成svg文字路径动画的实例（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
