《SVG 交互排版不翻车指南》
排版排得多了，难免会遇到一些莫名的问题。
比如普通图文排版不知道怎么就错乱了，老沙之前写过导致普通排版错乱的5个原因，感兴趣的可以戳：《排版，为什么总会出现错乱？》
大家可以长按下面两张图片体验下，一个可以识别二维码，一个不可以识别：
关于如何选择合适的无缝图组件，大家可以看下这篇详细介绍：《图文里的二维码长按无法识别，怎么回事？》
另外还有一些可能用错的组件，比如点击切换图片用成了长按切换、左滑用成了右滑等，大家在使用时要注意。
2.触发区域忘记设置
为了让交互更加精细，体验更好，iPaiban Pro 黑科技编辑器中的很多组件都提供了触发区域的设置。
可以调整触发区域的组件，除了组件卡片上有说明，选中后在编辑区右上角也会有提示。
鼠标双击图片，我们就可以通过调整红色区域来确定触发区域的大小和位置。
3.复制代替导入代码
因为交互效果的复杂性和特殊性，在 iPaiban Pro 黑科技编辑器中制作好的排版，不能直接复制，而是需要以导入代码的方式导入到公众号后台，这样可以大大避免排版效果出现问题。
在生成代码的窗口提供了两种导入代码的方式，一种是利用小助手插件导入，一种是在浏览器的「检查」模式下导入，大家根据自己的习惯选择哪种都可以。
如果我们成功导入了公众号一篇排版，还想将这篇排版放在其他公众号中，切记还是按照导入代码的方式进行导入，不能复制现在公众号中的排版粘贴到其他公众号中，否则交互很可能都会失效。
4.导入代码后触发交互
我们导入图文到公众号后，很多人在编辑页面就开始操作体验交互效果，这种做法是错误的。
比如一个点击切换图片效果，我们在编辑页面点击进行了触发，那推送后的图文中很可能只显示切换后的图片。
导入到公众号后我们第一时间要做的应该是点击「保存」按钮，然后点击「预览」发送到手机上预览效果，不能在编辑页面触发任何交互。
另外，如果我们只是局部导入的交互排版，最好也不要随便编辑非交互部分的内容，而是应该完全确认后再导入。
5.浏览器不适配
目前，无论是 iPaiban Pro 黑科技编辑器还是公众号后台本身，适配性最好的都是 Chrome（谷歌）浏览器。
如果不是在谷歌浏览器使用的 iPaiban Pro 黑科技编辑器，交互效果失效，很可能是浏览器不适配造成的。
所以编辑器最好是配合谷歌浏览器来使用，谷歌浏览器下载网址：
https://www.google.cn/chrome/
6.素材使用不当
如果我们的交互排版中用到了音频、视频或者需要添加外链时，应该注意以下三点：
1.在哪个公众号发布图文，就要在这个公众号上传音频来提取id，否则点击触发区域无法播放音频；
2.图文发布后切勿删除后台上传的视频，否则图文中的视频会显示被删除；
3.订阅号和未开通微信支付的服务不支持插入外链，如果想要在图文中添加外链，一定提前确认自己的公众号是否有权限，一般只有开通微信支付的服务号支持添加。
7.微信限制
SVG 交互效果都是基于公众号平台的规则来开发的，但公众号平台的规则也会发生变化，规则一旦改变，有些交互效果可能就会受到限制。
不过大家不用担心，这种情况很少发生，并且规则改变一般不会影响推送后的效果哦。
排版出现问题，除了以上原因，肯定还会有其他未知的因素。
再专业的排版技术人员，也不能保证永远不会出错，但排得多了，并不断总结经验教训，每次在推送前都认真检查预览效果，出错的情况一定会越来越少。
现在新用户注册登录 iPaiban Pro 黑科技编辑器，在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。
另外会员日福利二延续一周至8月27日，全场组件买二送一，购买年费多送一个月。购买后添加下方微信凭付款截图即可领取赠送福利。
如果有感兴趣的企业或品牌需要定制黑科技排版，请添加玉兔微信沟通。