写在前面：
微信公众号图文SVG交互排版可以说是企业品牌账号的常见的一种推文形式，像诸如Apple、小米、喜茶等诸多账号，都将微信公众号交互图文玩的出神入化。
像滑动、点击展开等一些常见的交互样式，在135等第三方编辑里均可以实现，虽然这很方便，但同时也让品牌图文交互受限于编辑器样式，所以品牌想实现独特的玩法，基本都是找第三方团队进行定制。
起初我以为微信的编辑器是一个类似HTML编辑器，可以通过前端代码实现我们所见的一些交互，但是我自己写的一些交互样式，在135编辑器中可以实现，但保存微信后台便会失效。
后来经过了解，微信公众号SVG图文实现原理与我所想有一定关联，区别在于微信公众号针对SVG AttributeName（元素名称）有着一个白名单，只有通过白名单的标签来书写交互，才能在微信公众号内正常显示。
实现原理：
实现微信SVG图文只需（微信允许的）HTML5标签和CSS3即可实现，无需用到JavaScript，
SVG AttributeName 白名单
SVG AttributeName 白名单就是上述“微信允许”的HTML5标签，如果使用的H5标签不在此白名单内，在图文保存后微信后台会对非白名单内的标签进行修改，致使样式和交互失效。
关于SVG AttributeName 白名单
SVG AttributeName 白名单最早于2016年由JZCreative团队与微信团队共同测试并发布，至今的主要迭代集中于其范式的具体应用。
注：
-
请勿使用突破白名单的规则进行互动排版或者模版设计，或将被微信团队视为对抗开发。典型的被封禁能力包括此前由部分编辑器恶意发布的图文弹跳等，尽管依然有漏洞可以突破，但相关开发均为高度危险举动。
-
由于 <id> 限制，请确保开发中不含剪切路径、滤镜、渐变、网格等矢量特征。解决方案：可以通过 <foreignObject> 等策略转为位图载入解决表现特性。
附2021 版微信 SVG AttributeName 白名单
其他一些SVG 重点参数特性：