作为爱玩黑科技排版的大户 — 喜茶，小编自然也要来扒一扒他们的SVG效果啦~ 喜茶公众号的文章里最爱用的就是点击展开的互动效果。
这篇文章里所呈现的互动效果其实是套用了点击切换gif图和点击展开两种效果，在135编辑器里使用一般的SVG样式是无法实现的，但是小编可以在SVG编辑器里轻松还原，下面有详细的操作教程噢~
操作教程：
准备工作：开始制作这篇喜茶的互动排版之前，我们需要准备一张点击前的封面gif图，一张点击后切换的gif图，以及展开显示的长图内容，拆解如下：
1、第一步：打开SVG编辑器，在【组合】栏目下找到【点击换图展开-自定义触发】卡片，单击将其放入中间的编辑区
2、第二步：第二步：在编辑器右侧点击【添加图片】按钮，将准备好的封面图和切换图依次上传，并在下方设置好动画时长的参数
3、第三步：点击【编辑展开内容】按钮，进入此编辑界面。在素材栏点击【无缝图-图片不可弹出】，并上传展开显示的长图 （这里也可以插入其他的效果进行套用）
4、第四步：上传完成后，点击中间橙色的【完成编辑】按钮，回到主编辑界面，鼠标拖动红色的触发热区，调整触发区域的位置和大小，热区外的位置点击不响应
5、第五步：设置完成并预览无误后，使用【同步】或【导出】功能，即可将SVG互动排版保存到微信公众号平台进行发布。
（图文仅作学习交流，版权归原作者所有。如有侵权请联系删除）
SVG编辑器本周已经正式上线！快来体验吧！
大家还有哪些想看的品牌SVG案例教程？快来给小编留言吧~
如果大家觉得小编还原得还不错的话，记得给小编点个赞呀！
