創(chuàng)新互聯(lián)服務(wù)項目包括蒸湘網(wǎng)站建設(shè)、蒸湘網(wǎng)站制作、蒸湘網(wǎng)頁制作以及蒸湘網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，蒸湘網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到蒸湘省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

現(xiàn)在很多公眾號都直接在正文頁通過SVG交互動畫增加文章的閱讀交互體驗，而不再跳轉(zhuǎn)H5。結(jié)合這一需求，本期分享的內(nèi)容是如何開發(fā)交互式SVG，并嵌入微信公眾號正文頁。設(shè)計師和前端開發(fā)同學都可以來學習下。學會了可以接這方面的私活了，短平快地賺小錢錢。

先看下最終SVG交互效果：

(體驗公眾號正文頁實際效果，請到本文底部掃碼關(guān)注公眾號)

1 為什么公眾號需要交互SVG

技術(shù)要有落地的應(yīng)用場景才能發(fā)揮實效。為什么很多公眾號開始做SVG交互而放棄H5呢？

主要原因有兩點：

1. H5制作成本高，需要一定的開發(fā)周期和服務(wù)器支撐。
2. 從正文頁跳轉(zhuǎn)H5頁面多了一個步驟，容易造成用戶流失。

當然，對于需要復雜交互，或者更多功能的話，還是需要單獨開發(fā)H5。

SVG雖然只能實現(xiàn)簡單的交互，但既能增加交互體驗又不會太分散用戶對內(nèi)容的關(guān)注點，在很多場景下還是很有需求的。

2 應(yīng)用場景

SVG交互本質(zhì)還是基于SVG SMIL animation，配合SVG的click事件，實現(xiàn)非常簡單的交互。

雖然實現(xiàn)的效果很有限，但還是有很多發(fā)揮空間的，比如以下應(yīng)用場景：

• 【汽車宣傳】點擊車子后，車子移動，經(jīng)過某個位置顯示某個特性或地點名稱文案。
• 【心理測試】點擊某個選項后，出現(xiàn)選擇結(jié)果。
• 【拆紅包】一層一層拆掉紅包，顯示最里面內(nèi)容。
• 【密碼解鎖】點擊指定的幾個數(shù)字后，顯示解鎖內(nèi)容。
• 【猜燈謎】點擊后顯示內(nèi)容，類似翻牌。

下面開始講解本期Demo的制作全過程。

3 素材制作

3.1 背景圖片

使用PS等軟件設(shè)計SVG的背景圖，建議寬度為640px~750px，也可以更高，但文件大小也會增加。 本例制作了 640px x 800px 的jpg背景圖：

3.2 SVG素材

可以去阿里巴巴矢量圖庫(www.iconfont.cn/)網(wǎng)站下載。也可以自行使用AI制作。 但需要注意控制好SVG的圖片尺寸。SVG的圖片的尺寸即點擊區(qū)域，所以控制好圖片中空余的留白區(qū)域。

本Demo從阿里矢量庫中下載了爆竹SVG，下載后用AI打開，縮小圖片的尺寸：

3.3 導出SVG

由于微信編輯器不允許嵌入