自定義SVG布局編輯 - 答題類 問卷 考試類
效果示范↑
1，準備工作
（1），將菜單欄切換成【專業版】
（2），在基礎布局，找到SVG布局，點擊樣式，放置在135編輯器編輯區內。
（3），在編輯區內點擊樣式，在彈出的菜單欄中點擊【SVG布局動畫】
2，制作答題類樣式
制作這個效果前，我們先對SVG動畫設置版面有個初步了解。大家可以點擊下面圖片，詳細查看。
要制作點擊答題類排版，需要設置兩個頁面。一個是點擊前的，一個是點擊后的。
頁面一是點擊前的顯示效果，我們將文字、顏色、文字大小做一個調整。如下圖：
橫向、縱向百分比設置：定位文字方位
文字內容：輸入后支持單行顯示
文字粗細：默認0，數值越大文字越粗
文字大小：默認18，數值越大，文字越大
文字顏色：與135編輯器一致
背景：可設置背景顏色
然后設置動畫效果，這里我們可以選擇淡出、1秒
動畫觸發：
點擊是需要讀者點擊后，才出現下一頁畫面效果。
自動是打開文章時，自動開始進行播放。
動畫類型：
無動畫：無任何效果
字幕：類似彈幕效果可以設置上下左右四個方向
快閃：快速切換閃動
淡入：逐漸顯示
淡出：逐漸消失
移入移出：當前畫面向上下左右四個方向移出或者移入
展開：只允許最后一屏設置展開效果，畫面向下展開
時間設置：
動畫時長：動畫能持續多久時間，時間設置得越久，動作就越緩慢
動畫延遲：讀者觸發了這個動畫效果后，多久開始執行這個效果。時間設置得越久，等待得越久。
設置好頁面一之后，我們點擊頁面右側的加號，復制當前頁。
在第二頁，我們要把答案輸入進去。動畫類型選擇無動畫即可。
接著我們將畫布寬高比設置一下，默認情況下寬高比為1:1，案例中選項是長方形的，我們可以將寬高比設置為100:20。
設置完畢后，點擊右上角的【預覽】查看整體效果。預覽無誤后，點擊完成即可。
由于這道題目，我們設置了三個選項，那么我們繼續編輯后面兩個。我們回到編輯器頁面，將選項A進行復制，再在下方粘貼出來。刪掉多余的部分。
回到SVG動畫設置中，繼續編輯選項B，只要將文字內容替換掉即可。選項C也是同樣的原理，復制、粘貼出來。唯一不同的是，在案例中我們將選項C設置為正確答案，那么在選項C的第二頁，我們要將文字內容“錯誤”改成“正確”，并且換一個背景色。
除此之外，我們還可以對這個答題樣式設置整體的寬度比例，以及邊框。這個根據自己的喜好去設置就可以了。
-END -
如果您的疑問尚未被解決
請點擊135編輯器右下角【聯系客服】
我們誠摯邀請您給135編輯器提供【意見和建議】
微信關注135編輯器 ID：editor135
獲取更多排版干貨知識
