還在花錢制作SVG嗎？（SVG制作小技巧）
胖友們大家好呀，我是三兒，胖友們絕對(duì)想不到吧，一張圖居然可以點(diǎn)不同的位置，彈出不同的圖片！
這也太神奇了吧？是不是需要定制？完全不用！
這是新上的svg樣式，超級(jí)簡(jiǎn)單就能實(shí)現(xiàn)這樣炫酷的操作哦！
話題猜謎，互動(dòng)型推文都可以用到這個(gè)樣式哦！接下來就跟著三兒一起來學(xué)習(xí)下吧！
單圖三個(gè)觸發(fā)點(diǎn)彈出圖片
ID:101417
【樣式作用】：創(chuàng)意SVG，可以與讀者進(jìn)行有效的互動(dòng)，幫助打造文章氛圍。除此之外，還可以結(jié)合產(chǎn)品特性，制作出更多的玩法。
【使用說明】：如需要替換圖片，請(qǐng)?jiān)趯I(yè)版用動(dòng)畫功能，需要使用同步功能同步至微信公眾號(hào)。
一、如何更換內(nèi)容？
135編輯器對(duì)SVG樣式做了更新，在專業(yè)版中特意添加了『動(dòng)畫』按鈕，胖友們可以在『動(dòng)畫』設(shè)置中對(duì)SVG樣式進(jìn)行修改。
1.首先將編輯器切換至專業(yè)版，點(diǎn)擊右側(cè)『更多功能』，在彈出的菜單中選擇『切換專業(yè)版』，即可將編輯器切換為專業(yè)版。
2.搜索樣式ID：101417，找到『svg單圖三個(gè)觸發(fā)點(diǎn)彈出圖片』樣式，插入至編輯器中。
3.點(diǎn)擊選中樣式（在樣式周圍出現(xiàn)虛線框時(shí)，才算選中哦?。趶棾龅牟藛螜谥?，選擇『動(dòng)畫』按鈕，進(jìn)入動(dòng)畫設(shè)置界面。
4.在動(dòng)畫設(shè)置界面，點(diǎn)擊『圖片上傳』，分別上傳隱藏的三張圖片和一張背景圖即可。
5.設(shè)置完所有內(nèi)容以后，點(diǎn)擊右側(cè)菜單欄中的『手機(jī)預(yù)覽』進(jìn)行測(cè)試。
注意：該SVG樣式僅支持手機(jī)預(yù)覽！
二、如何修改圖片位置？
三張隱藏點(diǎn)擊就彈出的圖片位置怎么調(diào)整呢？這就要通過調(diào)整源代碼才能實(shí)現(xiàn)了！
1.點(diǎn)擊左上角『HTML』進(jìn)入源代碼模式。
2.修改『justify-content：』之后的代碼即可讓圖片居左、居右、居中。
flex-start代表居左、center代表居中、flex-end代表居右。示意圖如下：
3.假設(shè)你想將第一張隱藏圖片改為居左，即將flex-end改成flex-start即可。
4.修改完畢后可以根據(jù)隱藏圖片的位置，適當(dāng)?shù)恼{(diào)整背景圖。（不太清楚的還可以看文末的視頻版教程）
注意事項(xiàng)：
這里需要注意的是，由于微信后臺(tái)限制，所以排版完成后的推文需要使用保存同步功能，如果使用復(fù)制粘貼會(huì)導(dǎo)致樣式失效！
好啦，今天的教程就到這里，原文教學(xué)視頻可參考：https://mp.weixin.qq.com/s/6gcvm7Vkr0R2APIonRdqtA
立即登錄
- 雙十二電商活動(dòng)宣傳排版素材（電商商品促銷推廣模版樣式）
- 乞巧節(jié)微信公眾號(hào)推文排版素材（愛情浪漫活動(dòng)推廣文案）
- 二十四節(jié)氣立秋圖文排版素材（金黃色系立秋推文文案模版）
- 八一建軍節(jié)紀(jì)念日推文排版樣式（光輝歷程文案宣傳模版）
