本篇文章圍繞再生農(nóng)業(yè)計劃展開，分別講解了雀巢在再生農(nóng)業(yè)方面的實施情況，從農(nóng)林業(yè)、土地恢復(fù)、綠色邊緣等角度具體敘述。整體設(shè)計以扁平畫風格為主，通過橫屏排版的方式來展示文章的主要內(nèi)容，讓原本看似枯燥的內(nèi)容以這種動畫的形式展示，增強了文章的可讀性，讓用戶能保持耐心繼續(xù)閱讀。

在這篇文章的排版設(shè)計上看，文章整體設(shè)計精致，可能很多人會覺得只有靠定制才能實現(xiàn)，其實這篇文章利用SVG組件也能復(fù)刻，它主要利用了多次點擊換圖展開SVG+點擊換圖SVG相結(jié)合完成了這一篇的交互效果。雖然都是我們常見的SVG，但這篇文章的創(chuàng)意卻是值得我們好好學(xué)習的地方。

大家通常在文章中對于點擊換圖SVG的使用都是比較分散的，只是作為文章的一個版塊，與其他內(nèi)容的銜接性不強，而這篇文章中，卻將簡單的點擊換圖SVG融入到橫版的長圖設(shè)計中，并與多次點擊換圖展開SVG結(jié)合，形成完整的推文效果，帶著用戶沉浸式的瀏覽閱讀。所以我們在以后的創(chuàng)意中也要養(yǎng)成整體思維。

在135編輯器首頁，選擇左側(cè)菜單欄【SVG編輯器】進入。

進入網(wǎng)頁后，選擇【互動效果】—素材中找到多次點擊換圖展開SVG，ID：112,點擊換圖SVG，ID：4，詳細制作教程如下：

多次點擊換圖展開教程：點擊查看

點擊換圖SVG使用教程：點擊查看