jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）-H5教程-PHP中文網

首頁

web前端

H5教程

jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

不言

Aug 08, 2018 am 11:20 AM

animate svg

這篇文章帶給大家的內容是關於jpg圖片轉換成svg文字路徑動畫的實例（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近對svg動畫很有興趣，用svg css可以實現一些讓人眼前一亮的效果，Ant Design 官網首屏就出現了svg動畫，coding 官網首頁也出現svg動畫，也許在非前端人員看來效果很普通，但是在前端開發人員眼裡，這種效果低調又張揚！這和你做的jq animate動畫一比較，高下判定！你還要說什麼？

能做成Ant Design那樣的動畫效果是我的目標，我想先做個簡單點的效果，譬如這樣的文字描邊動畫效果
jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

怎麼做的呢？

jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

這張jpg是我的頭像，最終呈現的效果就是以這張圖為基礎。

jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

首先要在PS中將圖的選取範圍轉換成路徑

jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

再將帶路徑的ps檔匯出到Ai

jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

#需要注意的是，第二個字母的路徑由兩部分組成，外層一個大選區，裡面一個小的選區，這裡要選“視窗”→“路徑查找器”，形狀模式選“差集”。

儲存成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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1322

PHP教程

1270

C# 教程

1249

Related knowledge

聊聊如何利用 SVG 實現圖片馬賽克效果 Sep 01, 2022 am 11:05 AM

不借助 Javascript，如何利用 SVG 實現圖片馬賽克效果？下面這篇文章就來帶大家詳細了解一下，希望對大家有幫助！

深入淺析vue3+vite中怎麼使用svg圖標 Apr 28, 2022 am 10:48 AM

svg圖片在專案中使用的非常廣泛，以下這篇文章帶大家介紹如何在vue3 + vite 中使用svg圖標，希望對大家有所幫助！

svg怎麼轉jpg格式 Nov 24, 2023 am 09:50 AM

svg可以透過使用影像處理軟體、使用線上轉換工具和使用Python影像處理庫的方法來轉jpg格式。詳細介紹：1.影像處理軟體包括Adobe Illustrator、Inkscape和GIMP；2、線上轉換工具包括CloudConvert、Zamzar、Online Convert等；3、Python影像處理庫等等。

VUE3入門教學：使用Vue.js外掛程式玩SVG Jun 16, 2023 am 09:48 AM

隨著現代Web前端開發的不斷發展，越來越多的技術被廣泛應用於實際開發中。其中，Vue.js是目前最受歡迎的JavaScript框架之一，它基於MVVM模式，提供了豐富的API和元件庫，使得開發響應式、可重複使用、高效的Web應用變得更加容易。而目前最新的Vue.js3版本相較於舊版，又有著更好的性能和更豐富的特性，引起了廣泛的關注和研究。本文將會為大家介紹一種

詳解用SVG為 favicon 新增標識 Sep 07, 2022 am 10:30 AM

怎麼使用SVG為 favicon 新增標識？以下這篇文章為大家介紹一下使用 SVG 產生帶有標識的 favicon的方法，希望對大家有幫助！

vue3+vite2中怎麼使用svg方法 May 11, 2023 pm 05:55 PM

一、安裝vite-plugin-svg-icons此處還需要安裝下fast-glob相關依賴，不然vite運行npmrundev時會報Cannotfindmodule'fast-glob'的錯誤npmifast-glob@3.x-Dnpmivite-plugin-svg -icons@2.x-D二、在src/components/svgIcon下新建元件index.vueimport{computed}from'vue';cons

adobe animate是什麼軟體 Jun 30, 2022 pm 04:01 PM

adobe animate是Adobe公司出品的一款2D動畫製作軟體，是一個多媒體創作和向量動畫製作軟體；它可用於設計向量圖形和動畫，並發佈到電視節目、影片、網站、網路應用程式、大型網路應用程式和電子遊戲中。使用Animate，可以創作出栩栩如生的動畫短片，同時animate也是一款前端工程師實現動畫互動的必備工具。

vue3+vue-cli4中怎麼使用svg May 11, 2023 pm 05:58 PM

一、安裝svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建元件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props:{iconClass:{type:String},className:{type:String},},setup

See all articles

jpg圖片轉換成svg文字路徑動畫的實例（附程式碼）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題