公衆號文章裏使用svg進行交互

前言

今天產品發我一個文章問我怎麼實現的之前印象裏公衆號文章都是簡單的圖文而且都是在公衆號素材管理裏添加素材也就是用公衆號自己的富文本編輯器，

後來查了查才發現還有這個騷操作F12插入svg代碼片段，簡直絕了,這算是微信漏洞？哈哈哈

我就不一一寫啦直接轉載篇文章了哈

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

先看下最終SVG交互效果：

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

1 爲什麼公衆號需要交互SVG

技術要有落地的應用場景才能發揮實效。爲什麼很多公衆號開始做SVG交互而放棄H5呢？

主要原因有兩點：

H5製作成本高，需要一定的開發週期和服務器支撐。
從正文頁跳轉H5頁面多了一個步驟，容易造成用戶流失。

當然，對於需要複雜交互，或者更多功能的話，還是需要單獨開發H5。

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

2 應用場景

SVG交互本質還是基於SVG SMIL animation，配合SVG的click事件，實現非常簡單的交互。

雖然實現的效果很有限，但還是有很多發揮空間的，比如以下應用場景：

【汽車宣傳】點擊車子後，車子移動，經過某個位置顯示某個特性或地點名稱文案。
【心理測試】點擊某個選項後，出現選擇結果。
【拆紅包】一層一層拆掉紅包，顯示最裏面內容。
【密碼解鎖】點擊指定的幾個數字後，顯示解鎖內容。
【猜燈謎】點擊後顯示內容，類似翻牌。

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

3 素材製作

3.1 背景圖片

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

3.1 背景圖.jpg

3.2 SVG素材

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

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

3.2 調整SVG尺寸.jpg

3.3 導出SVG

由於微信編輯器不允許嵌入<style><script>標籤，所以通過AI導出SVG的時候要進行一下設置：

3.3 導出SVG.jpg

把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.2 加入文字.jpg

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.3 文字動效.gif

4.4 從SVG提取爆竹代碼

打開AI生成的SVG文件，只取爆竹的矢量路徑代碼：

4.4 提取SVG路徑代碼.jpg

4.5 加入爆竹

加入爆竹代碼，使用<g>進行包裹，然後通過調節<g>的translate調節位置。

    <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.5 加入爆竹.jpg

4.6 製作願望牌SVG

通過AI製作願望牌SVG，記得通過Command+Shift+O，把文字轉化爲矢量。然後按照3.3章節導出SVG。

4.6 矢量化文字.jpg

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.7 加入願望牌.jpg

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 爆竹昇天

我們要實現的是通過“一次點擊”，爆竹上天，然後願望牌出現。爆竹和願望牌要打成組。

接下來，使用<animateTransform>實現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 願望牌顯示

在願望牌的<g>內加入<animate>，由於爆竹昇天動畫是0.5s，所以click+0.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>
                <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.1 微信後臺導入圖片素材.jpg

上傳成功後，打開圖片，獲取圖片的線上地址：

6.1 微信後臺導入圖片素材-2.jpg

6.2 導入微信文章正文

新建圖文消息，先輸入好標題、作者，上傳好封面圖。
然後在正文區域輸入兩行文字（微信要求正文必須含有文字）。

打開chrome調試工具，定位到第二行文字：

6.2 微信編輯器定位替換元素.jpg

在第二行文字代碼處，右擊鼠標選擇Edit as HTML:

6.2 微信編輯器嵌入svg-1.jpg

6.2 微信編輯器嵌入svg-2.jpg

然後隨便點擊下其他元素的代碼，有時可能會自動撤銷，如果出現這種情況，再重新粘貼一次就行。

完成後，就可以發佈預覽啦。

6.3 注意事項

微信編輯器有很多默認的“潛規則”，可能會拒絕我們嵌入的代碼，如果被拒，我們嵌入的代碼將會被刪除或者替換成其他的標籤。這裏列出我摸索出來的“潛規則”。

標籤裏的background的url()裏，地址不能加引號，單引號雙引號都不行，否則會被微信編輯器過濾掉。
標籤裏不能有id
不能有<style><script><a>標籤。

後續有新的發現會繼續更新。

6.4 奇葩BUG及技巧經驗

微信Android客戶端的公衆號正文頁裏點擊元素，進行移動動畫後，元素可能會出現奇怪的邊框。需要給涉及到的元素的<g>設置style="outline:none"，包括<g>內的所有子<g>。

6.4 Android-BUG.jpg

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

作者：Mr_兔子先生
鏈接：https://www.jianshu.com/p/8c2e4fc26e8a
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。