公眾號svg互動怎么制作？
SVG布局功能，此功能可以做出點擊換圖、點擊空白顯示文字/圖片、點擊直接展開、答題等效果。
在編輯器頁面左側的菜單欄選擇【樣式】——【布局】——【基礎布局】，往下滑動就可以找到SVG布局。
將SVG布局放入編輯區域后，選中它，調出右側的SVG布局面板，選擇【編輯SVG布局】即可進入此功能的界面。
SVG布局界面大致可以分成三個區域，第一個是增加畫布區，第二個是效果操作區，第三個是編輯區。
當你想要增加畫布時，點擊第一個畫布旁的【+】號即可。
如果你想要刪除畫布，跟增加畫布是同樣的操作，點擊右側此按鈕即可刪除。
在SVG布局中有兩種編輯選擇。第一種是編輯文本，第二種是編輯圖片。在編輯操作區域的最頂部【內容】處就可以進行選擇。
? 編輯文本
如果你選擇編輯的形式是文本，那就可以在編輯操作區域的【文字內容】框中輸入文字，這里需要注意，你輸入的文字內容要盡量簡短，一般一排文字對應一個文本框，如果你有多排文字內容需要換行，就需要再添加文本框。
輸入好文字內容之后，我們可以對文本的位置、顏色、粗細、字號進行調整。
除此之外，我們還能為文本添加動畫，這就是實現交互效果的關鍵所在。這里為大家提供了11種效果，包括淡入、淡出、收縮、展開等。
動畫觸發：這里有兩種選擇，一種是點擊后觸發動效，還有一種是自動播放動效。
背景：為了讓文本展示不單調，我們還可以為文本添加背景，有純色、漸變色等選擇。
? 編輯圖片
當你選擇編輯形式是圖片時，就選擇頂部的【內容】為【圖片】。
點擊中間區域的【上傳圖片】即可將圖片傳上去，一張圖片放入一個畫布，如果你有多張圖片，就開設對應的畫布數量。
圖片位置調整與文本的位置調整是一樣的，需要調整縱向和橫向的百分比。
圖片區域：這里有兩種選擇，第一種是包含，它的意思是指如果圖片的大小無法鋪滿整個畫布，則展示的時候會留出一定的空白區域。另一種是覆蓋，它的意思是指如果圖片大小無法鋪滿整個畫布時，則會自動裁剪拉伸該圖片，使其鋪滿整個畫布。
動畫效果：這里同樣為大家放置了11種效果，包括淡入、淡出、展開等。
? 編輯圖文內容
除了放文本和圖片以外，我們還可以在SVG布局中放入編輯好的文章、模板等。一般和展開的動畫效果一起使用。
選擇【預覽/編輯圖文】——【編輯圖文】即可打開編輯界面。
SVG布局可以做很多種SVG交互效果，由于篇幅有限，這里三兒就用SVG布局做兩款效果給大家展示，一個是點擊展開效果，另一個是點擊換圖效果。
效果展示↑
在此效果中三兒主要用到的是長圖，接下來三兒就來給各位寶子分享一下操作步驟，帶你們實現此效果。
第一步：自然是需要你準備好要用到的圖片了。在SVG布局里做點擊展開效果與SVG組件相比會更方便，比如如果你做的這一張長圖的尺寸在10M內，沒超過系統規定的大小，你就不需要切割分成多張圖片單獨添加，而是直接將整張圖放入編輯區域即可。
第二步：選擇編輯操作區的內容部分為【圖片】。
第三步：選擇動畫類型為【展開】，點擊【編輯圖文】按鈕，進入界面，在【圖片素材】區域上傳圖片。
第四步：把圖片放到編輯區域，選中之后，點擊圖片面板的【無縫】消除多余的縫隙，接著點擊【完成編輯】即可。
第五步：回到SVG布局主頁面之后就需要我們調整細節部分，這里需要調到3處細節。
由于剛放入的圖片的頭圖在效果區域不會完整顯示，所以我們需要調整【寬高比】以及【寬屏】，【寬屏】的意思是指讓此效果的圖片占滿整個編輯區，如果未勾選的話，兩邊會出現留白。【寬高比】的調整就是根據你頭圖的長度來設置。
設置動畫時長：數值越小，動效展示速度快，數值越大，動效展示速度慢，大家可以根基自己的需求自由調整。
最后點擊完成即可。
效果展示↑
上面所展示的是三兒做得點擊換圖效果，讓模糊的圖片變清晰。接下來三兒同樣來講解一下操作步驟。
第一步：首先需要準備兩張圖片，點擊前和點擊后的圖片。接著在編輯操作區選擇內容部分為【圖片】。
第二步：先上傳點擊前的圖片，在效果展示區可能最開始不會完整顯示圖片，所以就需要調整寬高比，將高度的數值進行調整，直至圖片完整顯示。
接著將動畫類型選擇【淡出】，動畫時長調整為1-2秒。
第三步：復制第一個畫布，將原本的圖片刪除，重新上傳點擊后的圖片，將此畫布的動畫類型選擇【無動畫】，動畫觸發設置為【點擊】，點擊完成即可。
立即登錄
