SVG編輯器入口：http://www.lyzs.cc/svgeditor/

因?yàn)檫@樣的獨(dú)特性排版，使它受到不少公眾號大號的追捧。除了我們常見的滑動、隱藏、彈幕...還有很多新奇有趣的玩法，比如SVG互動專題：

http://www.lyzs.cc/svg-center.html

SVG互動專題里面放著135所有的SVG互動樣式，每個(gè)樣式都搭配了相關(guān)的教程。大家可以很直觀地查看樣式效果，利用教程輕松做出黑科技排版。

本期我們給大家隆重介紹第二款黑科技排版神器——SVG布局。SVG布局的自由度更高，它更像是個(gè)獨(dú)立的編輯器，一旦你了解里面的功能，你可以自由搭配出各種想要的效果。因?yàn)橥扑臀恼缕拗?，本期我們只介紹七種效果，后續(xù)我們還會繼續(xù)為大家介紹。

1、點(diǎn)擊空白顯示文字

2、點(diǎn)擊空白顯示圖片

3、點(diǎn)擊文字切換文字

4、點(diǎn)擊圖片切換圖片（類似人民日報(bào)點(diǎn)亮武漢）

5、答題類（類似網(wǎng)易噠噠答題）

6、九宮格答題

7、自動播放圖片（不循環(huán)，建議放在文首）

8、點(diǎn)擊展開全文（打開卷軸）

...

這些都是比較基礎(chǔ)的互動排版，看完之后你是否也摩拳擦掌想要試試看呢？接下來我們先介紹一下SVG布局的常規(guī)功能。

1、將菜單欄切換成【專業(yè)版】

2、在基礎(chǔ)布局，找到SVG布局，點(diǎn)擊樣式，放置在135編輯器編輯區(qū)內(nèi)。

3、在編輯區(qū)內(nèi)點(diǎn)擊樣式，在彈出的菜單欄中點(diǎn)擊【SVG布局動畫】

橫向、縱向百分比設(shè)置：定位文字方位

文字內(nèi)容：輸入后支持單行顯示

文字粗細(xì)：默認(rèn)0，數(shù)值越大文字越粗

文字大?。耗J(rèn)18，數(shù)值越大，文字越大

文字顏色：與135編輯器一致

背景：可設(shè)置背景顏色

動畫觸發(fā)：

點(diǎn)擊是需要讀者點(diǎn)擊后，才出現(xiàn)下一頁畫面效果。

自動是打開文章時(shí)，自動開始進(jìn)行播放。

動畫類型：

無動畫：無任何效果

字幕：類似彈幕效果可以設(shè)置上下左右四個(gè)方向

快閃：快速切換閃動

淡入：逐漸顯示

淡出：逐漸消失

移入移出：當(dāng)前畫面向上下左右四個(gè)方向移出或者移入

展開：只允許最后一屏設(shè)置展開效果，畫面向下展開

時(shí)間設(shè)置：

動畫時(shí)長：動畫能持續(xù)多久時(shí)間，時(shí)間設(shè)置得越久，動作就越緩慢

動畫延遲：讀者觸發(fā)了這個(gè)動畫效果后，多久開始執(zhí)行這個(gè)效果。時(shí)間設(shè)置得越久，等待得越久。

圖片區(qū)域：

包含是指圖片如果無法剛好鋪滿畫布，則留出一定空白。

覆蓋是指圖片如果無法剛好鋪滿畫布，則會自動裁去超出的部分。

以上就是公眾號SVG互動排版教程，以及SVG互動專題樣式布局功能的大致介紹，更詳細(xì)的教程，大家可以登錄135編輯器135筆記查看！