搜索
首页web前端H5教程jpg图片转换成svg文字路径动画的实例（附代码）

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

不言
不言
Aug 08, 2018 am 11:20 AM
animatesvg

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

最近对svg动画很感兴趣，用svg+css可以实现一些让人眼前一亮的效果，Ant Design 官网首屏就出现了svg动画，coding 官网首页也出现svg动画，也许在非前端人员看来效果很普通，但是在前端开发人员眼里，这种效果低调而又张扬！这和你做的jq animate动画一比较，高下立判！你还要说什么？

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

怎么做的呢？

sonic.jpg

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

这里写图片描述

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

这里写图片描述

这里写图片描述

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

这里写图片描述

这里写图片描述

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

保存成svg格式，得到了代码：

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 215 215" style="enable-background:new 0 0 215 215;" xml:space="preserve"><style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#30479B;}</style><g>
    <path class="st0" d="M197,101c-7.9,2.1-13.8,8.2-25,5c-1.3-7.7-2.7-15.3-4-23c2.3-2.3,4.7-4.7,7-7c5.5-1.6,11.3-3.4,15,1
        c4.5-1.4,3.6-0.5,5-5c-3.7-1.7-7.3-3.3-11-5c-10.1,4.6-14.5,6.3-22,12c1.3,9.7,2.7,19.3,4,29c3.8,6.1,18.2,5.6,26,3
        c4.1-2,5-3.9,7-8C198.3,102.3,197.7,101.7,197,101z"/>
    <path class="st0" d="M144,73c-1.3,0-2.7,0-4,0c-2.3,1-4.7,2-7,3c1.3,5.3,2.7,10.7,4,16c3.3-1,6.7-2,10-3
        C148.1,83.3,145.3,79.1,144,73z"/>
    <path class="st0" d="M126,84c-10,0-20,0-30,0c1.3,14,2.7,28,4,42c2,0,4,0,6,0c-1-11.3-2-22.7-3-34c0.7-0.3,1.3-0.7,2-1
        c5.3,0,10.7,0,16,0c3,10,6,20,9,30c1.2,3.1,2,1.2,6,1c-3.3-12-6.7-24-10-36C126,85.3,126,84.7,126,84z"/>
    <path class="st0" d="M18,97c0.3,4.7,0.7,9.3,1,14c9,0.7,18,1.3,27,2c0.3,3,0.7,6,1,9c-7.7,0-15.3,0-23,0c0,1.7,0,3.3,0,5
        c5,0.7,10,1.3,15,2c4.3,0,8.7,0,13,0c0.7-6.3,1.3-12.7,2-19c-4.2-4-20.4-4.2-28-4c-0.3-2.3-0.7-4.7-1-7c7.8-5.5,19.4-2.3,29-5
        c0.7,0,1.3,0,2,0c0-2,0-4,0-6C34.4,87.6,30.9,88,18,97z"/>
    <path class="st0" d="M146,96c-1.7,0.7-3.3,1.3-5,2c-2.1,11.1,6.7,23,9,34c3.4,0.8,5.1,0.7,8-1c1-0.3,2-0.7,3-1
        c-3.3-11.3-6.7-22.7-10-34C149.3,96,147.7,96,146,96z"/>
    <path class="st0" d="M57,122c2.7,8.7,5.3,17.3,8,26c9.5,1.9,19.2-5.2,28-8c1.2-5.9-0.6-23.6-5-29C77.7,114.7,67.3,118.3,57,122z
         M70,141c-1.7-4.3-3.3-8.7-5-13c5.7-2.7,11.3-5.3,17-8c2.5,2.4,2.9,5,4,9C85.8,138.6,78.7,140.6,70,141z"/></g></svg>

将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 样式。

最终整体代码如下

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        svg{width: 250px;height: 250px;}
    </style></head><body style="background: #f1f1f1">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 215 215" style="enable-background:new 0 0 215 215;" xml:space="preserve">
    <style type="text/css">
        .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;            
            }
        }    
        </style>
    <g>
        <path class="st0" d="M197,101c-7.9,2.1-13.8,8.2-25,5c-1.3-7.7-2.7-15.3-4-23c2.3-2.3,4.7-4.7,7-7c5.5-1.6,11.3-3.4,15,1
            c4.5-1.4,3.6-0.5,5-5c-3.7-1.7-7.3-3.3-11-5c-10.1,4.6-14.5,6.3-22,12c1.3,9.7,2.7,19.3,4,29c3.8,6.1,18.2,5.6,26,3
            c4.1-2,5-3.9,7-8C198.3,102.3,197.7,101.7,197,101z"/>
        <path class="st0" d="M144,73c-1.3,0-2.7,0-4,0c-2.3,1-4.7,2-7,3c1.3,5.3,2.7,10.7,4,16c3.3-1,6.7-2,10-3
            C148.1,83.3,145.3,79.1,144,73z"/>
        <path class="st0" d="M126,84c-10,0-20,0-30,0c1.3,14,2.7,28,4,42c2,0,4,0,6,0c-1-11.3-2-22.7-3-34c0.7-0.3,1.3-0.7,2-1
            c5.3,0,10.7,0,16,0c3,10,6,20,9,30c1.2,3.1,2,1.2,6,1c-3.3-12-6.7-24-10-36C126,85.3,126,84.7,126,84z"/>
        <path class="st0" d="M18,97c0.3,4.7,0.7,9.3,1,14c9,0.7,18,1.3,27,2c0.3,3,0.7,6,1,9c-7.7,0-15.3,0-23,0c0,1.7,0,3.3,0,5
            c5,0.7,10,1.3,15,2c4.3,0,8.7,0,13,0c0.7-6.3,1.3-12.7,2-19c-4.2-4-20.4-4.2-28-4c-0.3-2.3-0.7-4.7-1-7c7.8-5.5,19.4-2.3,29-5
            c0.7,0,1.3,0,2,0c0-2,0-4,0-6C34.4,87.6,30.9,88,18,97z"/>
        <path class="st0" d="M146,96c-1.7,0.7-3.3,1.3-5,2c-2.1,11.1,6.7,23,9,34c3.4,0.8,5.1,0.7,8-1c1-0.3,2-0.7,3-1
            c-3.3-11.3-6.7-22.7-10-34C149.3,96,147.7,96,146,96z"/>
        <path class="st0" d="M57,122c2.7,8.7,5.3,17.3,8,26c9.5,1.9,19.2-5.2,28-8c1.2-5.9-0.6-23.6-5-29C77.7,114.7,67.3,118.3,57,122z
             M70,141c-1.7-4.3-3.3-8.7-5-13c5.7-2.7,11.3-5.3,17-8c2.5,2.4,2.9,5,4,9C85.8,138.6,78.7,140.6,70,141z"/>
    </g>
    </svg>
    </body>
    </html>

相关文章推荐：

svg中的symbol如何制作icon

SVG画图功能：svg实现画出一朵花（附代码）

以上是jpg图片转换成svg文字路径动画的实例（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
超越基础：H5代码中的高级技术超越基础：H5代码中的高级技术May 02, 2025 am 12:03 AM

H5的高级技巧包括：1.利用进行复杂图形绘制，2.使用WebWorkers提升性能，3.通过WebStorage增强用户体验，4.实现响应式设计，5.利用WebRTC实现实时通信，6.进行性能优化和最佳实践。这些技巧帮助开发者构建更动态、互动和高效的Web应用。

H5：网络内容和设计的未来H5：网络内容和设计的未来May 01, 2025 am 12:12 AM

H5（HTML5）将通过新元素和API提升网页内容和设计。1）H5增强了语义化标记和多媒体支持。2）它引入了Canvas和SVG，丰富了网页设计。3）H5的工作原理是通过新标签和API扩展HTML功能。4）基本用法包括使用创建图形，高级用法涉及WebStorageAPI。5）开发者需注意浏览器兼容性和性能优化。

H5：网络开发的新功能和功能H5：网络开发的新功能和功能Apr 29, 2025 am 12:07 AM

H5带来了多项新功能和能力，极大提升了网页的互动性和开发效率。1.语义化标签如、增强了SEO。2.多媒体支持通过和标签简化了音视频播放。3.Canvas绘图提供了动态图形绘制工具。4.本地存储通过localStorage和sessionStorage简化了数据存储。5.地理位置API便于开发基于位置的服务。

H5：HTML5的关键改进H5：HTML5的关键改进Apr 28, 2025 am 12:26 AM

HTML5带来了五个关键改进：1.语义化标签提升了代码清晰度和SEO效果；2.多媒体支持简化了视频和音频嵌入；3.表单增强简化了验证；4.离线与本地存储提高了用户体验；5.画布与图形功能增强了网页的可视化效果。

HTML5：标准及其对Web开发的影响HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。

H5代码示例：实际应用和教程H5代码示例：实际应用和教程Apr 25, 2025 am 12:10 AM

H5提供了多种新特性和功能，极大地增强了前端开发的能力。1.多媒体支持：通过和元素嵌入媒体，无需插件。2.画布（Canvas）：使用元素动态渲染2D图形和动画。3.本地存储：通过localStorage和sessionStorage实现数据持久化存储，提升用户体验。

H5和HTML5之间的连接：相似性和差异H5和HTML5之间的连接：相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础：密钥元素及其目的H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前ByDDD
如何修复KB5055523无法在Windows 11中安装？
3 周前ByDDD
Inzoi：如何申请学校和大学
1 个月前ByDDD
如何修复KB5055518无法在Windows 10中安装？
3 周前ByDDD
在哪里可以找到Atomfall中的站点办公室钥匙
4 周前ByDDD
显示更多

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7890
15
Java教程
1650
14
CakePHP 教程
1411
52
Laravel 教程
1302
25
PHP教程
1248
29
显示更多