一学就会的敲冰块 SVG 互动推文制作教程
想让你的推文趣味十足且互动感满满？快来学习如何打造敲冰块 SVG 互动推文，通过点击换图让你的内容与众不同，详细步骤和技巧一站式呈现，轻松吸引读者互动，快来探索吧！
上周三儿在135平台发了篇推文
（点击回顾）
不少朋友留言问三儿
这篇效果是怎么做的
大家都知道三儿最宠粉了
喏，快搬好小板凳
今天的三儿小课堂准备开课啦
该效果从本质上来说其实就是「点击换图」，不过以往我们是一行一列单张图的替换。这次我们是一行多列的「点击换图」。若我们使用一行四列布局（ID：350）搭配点击换图（ID：4），这种方法自然可以实现，但这只适合内容背景素材偏少的情况，像本文有350个冰块的情况，使用该方法需要切350个背景图，费时费力。还有什么相对简便一点的方法吗？有，使用多区域点击换图，具体如何操作？且看下文。
01.进入SVG编辑器
在135编辑器左侧找到「SVG编辑」
02.搜索效果组件
在「SVG效果」中搜索组件ID183，找到多区域点击换图。
在使用组件前，我们需要仔细阅读素材要求，避免因上传素材不符要求而导致效果无法实现。
“背景”
点击后的图
点击前的图
03.一些“疑点”
如果根据我们提供的素材上传，好像无法使用该效果。因为素材要求明确规定，「点击前」与「点击后」的图尺寸需保持一致，背景图可以不做要求。可明眼人都能看出，我们点击前后的图尺寸相差甚远，如果强行上传，结果只会是无法正常使用该效果。
这最后呈现的效果也不对呀，难道是我们操作错误？其实我们只需要换个思路，如果我们把「点击后的图」作为背景图，点击前的图还是正常上传，「点击后的图」不上传，保持为空。我们试想下，触发「点击前的图」后它消失，是不是就露出了背景？
04.那背景图咋办呢？
好问题！我们可以在135编辑器中给全文设置背景，我们仔细看「点击后的图」中冰块之间其实是镂空的，可以完美露出背景，而其他部分会被原本内容遮挡，不用担心会穿帮。
05.如何设置全文背景？
在135编辑器，顶部菜单栏找到「背景」-「背景设置」-「图片背景」上传我们的图片即可。
06.那其他内容我该怎么做呢？
像本文前面所展示的「无缝图」+「多区域点击换图」+「无缝图」的组合，其实就是各个组件的拼凑，所以我们只需在编辑页前端放置无缝图即可。
07.如何导出到135编辑器中
排版完成后，我们需要导出到135编辑器给全文添加背景，那么如何导出到135编辑器呢？在svg编辑器右上角找到「导出」选择「复制代码到135编辑器」。
回到135编辑器页面在顶部左上角找到「HTML」点击全选代码后粘贴刚刚复制的代码，复制完成后再点击「HTML」即可
以上就是三儿分享的全部内容了
如果觉得还不错
记得点赞+在看
如果还有什么想看想学的
欢迎在评论区留言哦
还有一件事
成都世运会开幕啦
相信这段时间一定有许多新闻
需要排版宣传
作为成都本土企业
三儿也想要为咱们世运会助力
8月7日——8月17日
新用户注册135编辑器后
在「135编辑器」公众号
后台回复
「成都世运会雄起」
即可获得3天标准会员时长
