現在很多公眾號都直接在正文頁通過SVG交互動畫增加文章的閱讀交互體驗，而不再跳轉H5。結合這一需求，本期分享的內容是如何開發交互式SVG，并嵌入微信公眾號正文頁。設計師和前端開發同學都可以來學習下。學會了可以接這方面的私活了，短平快地賺小錢錢。
先看下最終SVG交互效果：
(體驗公眾號正文頁實際效果，請到本文底部掃碼關注公眾號)
1 為什么公眾號需要交互SVG
技術要有落地的應用場景才能發揮實效。為什么很多公眾號開始做SVG交互而放棄H5呢？
主要原因有兩點：
當然，對于需要復雜交互，或者更多功能的話，還是需要單獨開發H5。
SVG雖然只能實現簡單的交互，但既能增加交互體驗又不會太分散用戶對內容的關注點，在很多場景下還是很有需求的。
2 應用場景
SVG交互本質還是基于SVG SMIL animation，配合SVG的click事件，實現非常簡單的交互。
雖然實現的效果很有限，但還是有很多發揮空間的，比如以下應用場景：
下面開始講解本期Demo的制作全過程。
3 素材制作
3.1 背景圖片
使用PS等軟件設計SVG的背景圖，建議寬度為640px~750px，也可以更高，但文件大小也會增加。 本例制作了 640px x 800px 的jpg背景圖：
3.2 SVG素材
可以去阿里巴巴矢量圖庫(www.iconfont.cn/)網站下載。也可以自行使用AI制作。 但需要注意控制好SVG的圖片尺寸。SVG的圖片的尺寸即點擊區域，所以控制好圖片中空余的留白區域。
本Demo從阿里矢量庫中下載了爆竹SVG，下載后用AI打開，縮小圖片的尺寸：
3.3 導出SVG
由于微信編輯器不允許嵌入 <style><script> 標簽，所以通過AI導出SVG的時候要進行一下設置：
把Styling選擇為Presentation Attributes，這樣導出的SVG就不含有 <style> ，而且元素的樣式也會通過標簽屬性進行設置，而不使用style內聯css。
4 構建SVG
4.1 SVG基本結構
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>
這里的style均為基礎的CSS，就不再詳述了。
主要說下viewBox屬性：
viewBox="x, y, width, height"
x、y 控制SVG內所有元素的位移（不影響SVG的背景圖）。
width、height 并不是SVG的實際寬高，而是SVG內的“分辨率”。width、height越大，SVG內的元素越小，反之，元素則越大（不影響SVG的背景圖）。
建議viewBox的x、y設置為0，width、height設置為背景圖的尺寸。
4.2 放入文字
先使用 <text> 加入文字：
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">+ <text x="200" y="540" fill="#fff" style="font-size: 30px">點擊爆竹放飛夢想</text> </svg>
通過調整x、y把位置調好，fill為文字顏色，style設置字號。
4.3 加入文字動效
現在實現文字的閃爍效果。這里需要使用 <animate> 和 <g> 標簽。
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">+ <g>+ <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate> <text x="200" y="540" fill="#fff" style="font-size: 30px">點擊爆竹放飛夢想</text>+ </g> </svg>
介紹下 <animate> ：
attributeName ，為動畫控制的屬性，這里為opacity透明度。
begin ，為動畫開始時間，可以理解為延遲時間。0s表示立即開始動畫。也可以是分號分隔的一組值，例如beigin="3s;5s"，表示的是3s之后動畫開始，6s時候動畫再重新開始（如果之前動畫沒走完，會立即停止從頭開始）。
dur ，為動畫時間，dur越小，動畫越快。
values ，表示attributeName指定屬性的值變化,可以是一個值，也可以是用分號分隔的多個值，這里的"1;0;1"表示“不透明->透明->不透明”，即閃爍效果。
repeatCount ，表示動畫重復次數，indefinite=無數次
<g> 標簽很簡單，就是把包起來的元素打成組合，這樣animate就只針對 <g> 內的元素執行動畫了。
效果如下：
4.4 從SVG提取爆竹代碼
打開AI生成的SVG文件，只取爆竹的矢量路徑代碼：
4.5 加入爆竹
加入爆竹代碼，使用
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代碼（略） </g>+ <g style="transform: translate(140px, 580px);">+ <path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" />+ <path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" />+ <path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" />+ <path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" />+ <path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" />+ <path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" />+ <path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" />+ </g> </svg>
4.6 制作愿望牌SVG
通過AI制作愿望牌SVG，記得通過Command+Shift+O，把文字轉化為矢量。然后按照3.3章節導出SVG。
4.7 加入愿望牌
愿望牌是在爆竹升天后顯示的，實際上是蓋在了爆竹前面，爆竹并沒有消失。所以愿望牌的代碼應該寫在爆竹代碼的后面。從SVG提取愿望牌代碼參照4.4章節，并調節位置，加入后的代碼如下：
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代碼（略） </g> <g style="transform: translate(140px, 580px);"> 爆竹矢量代碼（略） </g>+ <g style="transform: translate(120px, 560px);">+ 愿望牌矢量代碼（略）+ </g> </svg>
效果如下，愿望牌完全擋住了爆竹：
4.8 設置愿望牌初始屬性
由于愿望牌初始狀態未不可見，所以將opacity設為0。
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代碼（略） </g> <g style="transform: translate(140px, 580px);"> 爆竹矢量代碼（略） </g>M <g style="transform: translate(120px, 560px);opacity: 0;"> 愿望牌矢量代碼（略） </g> </svg>
5 SVG點擊交互
5.1 爆竹升天
我們要實現的是通過“一次點擊”，爆竹上天，然后愿望牌出現。爆竹和愿望牌要打成組。
接下來，使用 實現click觸發動畫。
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代碼（略） </g>+ <g>+ <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform> <g style="transform: translate(140px, 580px);"> 爆竹矢量代碼（略） </g> <g style="transform: translate(120px, 560px);opacity: 0;"> 愿望牌矢量代碼（略） </g>+ </g> </svg>
關鍵屬性講解：
type ， attributeName="transform"的值，可以是 translate、scale、rotate、skewX、skewY。
fill ，動畫間隙的填充方式。支持參數有：freeze、remove。remove是默認值，表示動畫結束直接回到開始的地方。freeze表示動畫維持結束后的狀態。
restart ，支持的參數有always、whenNotActive、never。always是默認值，表示每點一次重新執行動畫；whenNotActive表示動畫正在進行的時候不能重啟動畫；never表示動畫僅執行一次。
begin ，延遲時間，上面已講過，這里補充下click，表示點擊后立即觸發， click+2表示點擊后2秒觸發。
現在我們已經實現了點擊爆竹后升天的效果，但是愿望牌還處于不可見狀態。這里就用到“click+時間”的玩法。
5.2 愿望牌顯示
在愿望牌的
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代碼（略） </g> <g> <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform> <g style="transform: translate(140px, 580px);"> 爆竹矢量代碼（略） </g> <g style="transform: translate(120px, 560px);opacity: 0;">+ <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate> 愿望牌矢量代碼（略） </g> </g> </svg>
※注：請注意設置begin=click的元素和設置begin=click+0.5的元素的層級關系。首先，click元素和click+0.5元素要處于同一個 <g> 內；其次，click+0.5元素層級要比click元素的層級更深，所以能夠正確的對應同一個click事件。
5.3 完成剩余爆竹
剩下兩個爆竹，只需按照以上步驟，替換愿望牌的圖片，然后調整元素位置即可，不再贅述。
6 導入微信公眾號
6.1 上傳背景圖素材
以上代碼中的背景圖我們用的是本地的路徑，需要上傳至微信后臺，獲取線上地址。 進入微信公眾平臺，點擊左邊的素材管理->圖片->上傳:
上傳成功后，打開圖片，獲取圖片的線上地址：
6.2 導入微信文章正文
新建圖文消息，先輸入好標題、作者，上傳好封面圖。 然后在正文區域輸入兩行文字（微信要求正文必須含有文字）。
打開chrome調試工具，定位到第二行文字：
在第二行文字代碼處，右擊鼠標選擇Edit as HTML:
替換為我們的SVG代碼：
然后隨便點擊下其他元素的代碼，有時可能會自動撤銷，如果出現這種情況，再重新粘貼一次就行。
完成后，就可以發布預覽啦。
6.3 注意事項
微信編輯器有很多默認的“潛規則”，可能會拒絕我們嵌入的代碼，如果被拒，我們嵌入的代碼將會被刪除或者替換成其他的標簽。這里列出我摸索出來的“潛規則”。
后續有新的發現會繼續更新。
6.4 奇葩BUG及技巧經驗
微信Android客戶端的公眾號正文頁里點擊元素，進行移動動畫后，元素可能會出現奇怪的邊框。需要給涉及到的元素的 <g> 設置style="outline:none"，包括 <g> 內的所有子 <g> 。
SVG圖片的圓心
在用AI設計SVG的時候，最好把元素的圓心設置在SVG的中點，否則在實現rotate動畫時，圓心偏離將導致元素旋轉出現問題。雖然可以通過from和to的后面兩個參數調節圓心位置，但是非常難手動找到精確的位置。
<animateTransform attributeName="transform" type="rotate" from="0 41.5 43" to="360 41.5 43" dur="3s" repeatCount="indefinite">
6.5 參考文獻
張鑫旭的博客《超級強大的SVG SMIL animation動畫詳解》
https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/
SVG參考
https://www.runoob.com/svg/svg-reference.html
6.6 完整HTML代碼
請前往我的github查看: https://github.com/Yuezi32/weixin_svg_demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
