很多胖友在排版的时候，会遇到有多张图片需要排版的情况，三儿一般会建议新手小白们先按最简单方式上下、左右平铺排列，这样最不容易出错。

这么说，难道还有高阶的玩法？先卖个关子，来看看三儿下面做的这个图片展示的案例吧。

点击人物展开图片

怎么样，用SVG来展示这5张图片，是不是更有创意了！

这种图片展开，人物跟随移动的效果使用的是SVG编辑器的 『点击展开同时上层物体移动-自定义触发』 组合，展开内容中的图片数没有限制，想放几张就放几张！

想学吗？来看看三儿是怎么做出来的吧↓

通过135编辑器左侧入口进入svg编辑器

或者直接在浏览器输入svg编辑器网址进入：

https://www.135editor.com/svgeditor/

找到『点击展开同时上层物体移动-自定义触发』，点击将组合添加到中间的编辑区

在编辑页面右侧点击『添加图片』按钮，为素材添加 触发展开图和小元素图片

鼠标拖动红色方框， 为小元素图片设置触发热区的大小和所在位置。

为展开的内容设置动画时长，数值越大，展开的时间越慢；数值越小，展开的时间越快

点击编辑器右侧『编辑展开内容』进入新的编辑页面，编辑展开内容

选择『 批量无缝图（点击不可弹出） 』或『 无缝图（点击不可弹出） 』素材，上传好图片即可

注意：

该效果展开内容只支持放不可弹出无缝图，除了小元素图片以外的底部所有背景图都需要宽度一致

展开内容编辑完成后，点击页面上方的『完成』按钮，返回主编辑页面

制作好的SVG文章可以通过使用『同步』或『导出』功能，保存到微信公众号平台（ps:不知道咋同步和导出的胖友，点击按钮，根据提示操作即可）

注意：

如使用导出代码功能，则需根据SVG效果的使用平台（135编辑器/微信后台），选择对应平台的代码进行复制，尽量不要直接粘贴代码，以免效果有误。

以上就是

『点击展开同时上层物体移动』的使用教程

除了这种图片展示方式

SVG编辑器里还有更多

酷炫又有创意的图片展示SVG

『点击放大换图展开』

『自动拼图分裂式换图展开』

『点击开门展开』

......

下一期你想看什么

欢迎在评论区留言呀~