利用秀米的SVG布局的穿透功能实现横屏长图互动原理+教程

昨天同事发给我这样一篇文章问我实现方式，如首图，点击文章闪动的部分就会跳到图片浏览模式，但并不是最外层的这张带有闪动点的图。文章到手之后首先我们需要点击F12，查看源代码，看看是哪个编辑器做的。结果没有发现135editor的痕迹，这个时候就比较头大，然后我又盯上了链接本身，这个链接确实和普通微信文章的链接看起来不太一样。

https://mp.weixin.qq.com/s/W6mSQW4ts40W-yTNlNGxSQ

比我们常生成的链接要短得多。但是从链接本身找到的线索非常少。只能证明这是通过微信发布的文章。然后到秀米编辑器的用户群里去问了一下，刚好秀米有这种功能。群里大佬说这种功能是用穿透功能实现的。然后我在秀米中实验了一下，果然，功夫不负有心人，我最终实现了这种效果，下面就来教给大家这种效果怎么做。

1.首先点击新建图文，

2.在秀米左侧的功能区选择图文模板选择布局，选择基础布局，

然后在基础布局的模板里面找到SVG布局，（SVG布局支持自定义动画）。然后在SVG布局中添加你想隐藏在下面的图片。如果最终想要做出的效果是横屏的话，需要提前将图片旋转，这样用户最终看到的图片就是横屏模式了。

3.点击SVG布局最外层的框。选择动画。

4.设置图片穿透效果。

再预览的时候就会发现你的底层图片被上层图片覆盖了。点击图片位置就弹出了隐藏的图片。