公众号也能做交互？我用 SVG 给阿嬷的情书写了三封信

上一篇文章发出去之后，有个读者说了句"你这个小动画不错"。

就这么一句话。但我反复想了好久——大家对公众号文章里的"动"是有感知的。那除了小动画，文字和图片能不能也做成交互的？点一下有变化，翻一下看到新内容？

我开始折腾。

折腾了一晚上，踩了一个巨坑，推翻了两版设计，最后做出了三个还算满意的 SVG 交互效果。文末附了踩坑清单，想自己折腾的可以少走弯路。

1

先说电影

五一的时候去看了《给阿嬷的情书》。

那时候票房才几千万，影厅里人不多。一个潮汕男人下南洋谋生，和妻子隔着整片南海，靠"侨批"维系一个家——从东南亚寄回去的信和钱。

回去跟同事推荐，一个个看完都说好看。现在票房破 7 亿了。

刚好 521，刚好被这部电影打动过。就拿它来做素材。

2

信封：点一下拆开

做了一个信封。牛皮纸色，有封蜡，有邮戳，有航空红蓝条纹。

点一下试试——

吾妻淑柔，展信安康随信寄两百元，我一切无恙，生意昌顺。行船入夜，恰江上升明月，圆如玉坠，仿若身在故乡，似与你并肩共赏。江海万里，心中念你，便不觉遥远。纸短情长，伏惟珍重。木生 寄521 · 纸短情长—— 《给阿嬷的情书》——情暹罗1948叶 淑 柔  亲 启寄自暹罗 · 郑木生       — 点击拆开这封信 —       

信纸上写的是木生寄给淑柔的信。

技术上很简单：SVG 两层叠放，信封在上，信纸在下。点击信封，淡出消失，露出信纸。

但这一次点击背后调了很久。行距、字号、木棉花压花的透明度、"点击拆开这封信"那行字闪烁的节奏——AI 五分钟出一版代码，什么时候"对了"，得自己看、自己调。

3

时间轴：五个节点，五次点击

五个年份，1948 到 1960。

每个年份是一个折叠的节点，上面写着一句台词。点开，展开一小段文字，讲那一年发生了什么。

一个人的南洋十二年郑木生 寄自暹罗 · 1948—1960     点击卡片，展开每一年的故事     481948 · 初下南洋避壮丁，十八岁孤身渡海国军抓壮丁，母亲连夜安排偷渡。一个人坐船到暹罗，举目无亲，靠蹬三轮车起步谋生。寄回第一笔钱：港币五十元。「我在暹罗非常好，免担忧。」—— 第一封侨批「免担忧。」       — 点击展开 —       511951 · 站稳脚跟三轮换摊位，开始做小生意三年蹬三轮攒下本钱，在曼谷唐人街盘下一个摊位，寄回的钱多了，每封附两百元。「我一切无恙，生意昌顺。」—— 寄自曼谷唐人街「生意昌顺。」       — 点击展开 —       531953 · 月夜思乡湄南河上的月光，像故乡的春天行船送货路过湄南河，夜里月亮又圆又亮，河畔木棉花开得正盛，压了一朵在信纸里寄回家。「江海万里，心中念你，便不觉遥远。」—— 附：木棉花一朵「心中念你，便不觉遥远。」       — 点击展开 —       561956 · 扬帆起航八年拼搏，三轮换货船从三轮车到摊位，从摊位到店铺，八年勤俭，终于盘下一条货船。他觉得团圆的日子近了。「江海有岸，团圆可盼。」—— 寄自暹罗湾「团圆可盼。」       — 点击展开 —       601960这一年，信还在寄……写信的人，已不在了。但有人替他，继续寄了十八年。—— 谢南枝纸短情长，山海可越—— 521 ·《给阿嬷的情书》——

最后一个节点，1960。空心圆，虚线边框，不能点击。

写信的人，已不在了。但有人替他，继续寄了十八年。

五个节点拆成了五个独立的 SVG，每个管自己的点击。为什么要拆？下面讲。

4

画报：最早想做翻页，被微信干掉了

这个画报最早不长这样。

我最早的设计是日历翻页——封面翻到第一页，第一页翻到第二页，一页一页翻下去。做完推到微信草稿箱一试，封面能翻，第一页翻不动了。

我以为是图片挡住了点击。加了 pointer-events="none"，不行。

我以为是透明点击区域没放对。挪到最后一个子元素，不行。

我做了个纯文字的测试——红色方块点一下消失，露出绿色方块，再点，绿色方块纹丝不动。

微信公众号的 SVG，一个元素只能响应一次点击。

这是最大的坑。不是代码写错了，不是图片挡住了，是微信就不支持。

想明白这件事以后，日历翻页这条路就死了。改成现在这样：封面点一下拆开，底下三张卡片直接滑动浏览，不需要再点。

点击拆开——

侨 批 · 壹暹罗虽远，心有所寄，身若比邻。离别前最后的温柔时光，此后万水千山，唯有信寄相思。向下滑动，继续阅读 ↓侨批画报—— 电影《给阿嬷的情书》——纸短情长山海可越三封侨批，跨越山海三段岁月，一生深情暹罗 · 汕头1948 — 1960521 · 给阿嬷的情书       — 点击拆开 —       侨 批 · 贰批一封，银二元，我在番畔，一切平安。漂洋过海长大的孩子们，学的第一课，是认得回家的字。侨 批 · 叁讣告写好了，她却没有寄出去。从此以他的名字，继续写信，继续寄钱。做人要有情有义。521 · 给阿嬷的情书—— 愿天下有情人，都被温柔以待 ——

三张卡片配三句台词，最后以"做人要有情有义"收束。

有时候限制反而让设计变得更干净。

5

踩坑清单

记下来给想折腾的人。

能用的

· SVG SMIL 动画：呼吸闪烁、淡入淡出都行

· 点击触发：begin="click" 配合 restart="never"

· 多个独立 SVG 各自响应点击

· SVG 内嵌图片

不能用的

· CSS @keyframes：微信直接过滤

· JavaScript：完全不支持

·id 属性：微信会删掉所有 id

·一个 SVG 内多次点击：最大的坑

·position: absolute 和负 margin：微信不认

最关键的一条

opacity: 0 的元素仍然拦截点击。消失的层必须同时设 pointer-events="none"，下面的层才能被点到。   

6

差不多了，又差一点

这算是一个初始的 demo。做得不算完美，但离我想做的东西已经很近了——

公众号文章不只是"看"的。它可以点、可以翻、可以有节奏地展开。

一封信，你得自己拆开才有感觉。一条时间轴，你得一个个点开才知道那十二年发生了什么。

代码是 AI 写的，调到满意是我自己一遍遍来的。推到微信发现翻不了页，又改了好几版。

这就是用 AI 做东西真实的样子——不是一句提示词就完美出图，是在"差不多了"和"还差一点"之间反复横跳。

纸短情长，山海可越。

三个 SVG 交互效果的提示词正在整理中，整理完会放在评论区。复制给 AI，可以生成你自己的版本。

点个赞点关注说两句你的每一次互动，都是我继续写下去的动力— 月鹿造物 —