微信公众号 SVG 交互图文案例产品系统

基于 SVG SMIL 动画和 CSS3 实现微信公众号互动图文，支持点击展开、滑动切换、长按显示，视频号嵌入等交互效果

该图文模拟了"同福客栈"直播带货场景，顶部嵌入视频播放，下方通过 SVG 构建了一个超长竖屏直播间界面。
用户点击不同角色可弹出对应商品卡片，实现"人→货"互动浏览。
包含滚动式商品轮播、进入直播间按钮组动画、人物 GIF 动态表情、呼吸闪烁点击提示等交互细节，将《武林外传》IP 与电商直播形式创意融合，带来沉浸式内容消费体验。

基于微信公众号 SVG 交互规范，使用 SVG 元素嵌套 foreignObject 构建场景，通过 SMIL 标准动画（animateTransform、animate、set）驱动元素移动、透明度呼吸和点击显隐，配合透明 rect 触发区域实现点击交互逻辑，并在顶层叠加 GIF 动图人物角色与 PNG 场景背景。