写在前面：

微信公众号图文SVG交互排版可以说是企业品牌账号的常见的一种推文形式，像诸如Apple、小米、喜茶等诸多账号，都将微信公众号交互图文玩的出神入化。

像滑动、点击展开等一些常见的交互样式，在135等第三方编辑里均可以实现，虽然这很方便，但同时也让品牌图文交互受限于编辑器样式，所以品牌想实现独特的玩法，基本都是找第三方团队进行定制。

起初我以为微信的编辑器是一个类似HTML编辑器，可以通过前端代码实现我们所见的一些交互，但是我自己写的一些交互样式，在135编辑器中可以实现，但保存微信后台便会失效。

后来经过了解，微信公众号SVG图文实现原理与我所想有一定关联，区别在于微信公众号针对SVG AttributeName（元素名称）有着一个白名单，只有通过白名单的标签来书写交互，才能在微信公众号内正常显示。

实现原理：

实现微信SVG图文只需（微信允许的）HTML5标签和CSS3即可实现，无需用到JavaScript，

SVG AttributeName 白名单

SVG AttributeName 白名单就是上述“微信允许”的HTML5标签，如果使用的H5标签不在此白名单内，在图文保存后微信后台会对非白名单内的标签进行修改，致使样式和交互失效。

关于SVG AttributeName 白名单

SVG AttributeName 白名单最早于2016年由JZCreative团队与微信团队共同测试并发布，至今的主要迭代集中于其范式的具体应用。


注：
  • 请勿使用突破白名单的规则进行互动排版或者模版设计，或将被微信团队视为对抗开发。典型的被封禁能力包括此前由部分编辑器恶意发布的图文弹跳等，尽管依然有漏洞可以突破，但相关开发均为高度危险举动。
  • 由于 限制，请确保开发中不含剪切路径、滤镜、渐变、网格等矢量特征。解决方案：可以通过 等策略转为位图载入解决表现特性。

附2021 版微信 SVG AttributeName 白名单



——animate

  • (c) x：控制简单几何体 x 轴方向移动。（创意应用如柱状图等）
  • (c) y：控制简单几何体 y 轴方向移动。（创意应用如柱状图等）
  • width：控制简单几何体宽度变化。（创意应用如身长式图文（宽度自适应））
  • height ：控制简单几何体高度变化。 （创意应用如审伸长、展开式图文，预占位等）
  • r ：控制圆形几何体半径变化
  • opacity ：控制透明度变化，数值为0到1
  • d ：控制贝塞尔曲线补间行为，但表现具有随机性。
  • points ：控制多边形补间行为，但表现具有随机性。
  • stroke- ：含storke 描边色以及stroke-width｜stroke-linecap｜stroke-dashoffset描边宽度、描边端点和描边偏移量。 （创意应用：如遮罩动画、饼/分图、进度线等。）
  • fill ：控制填充色过渡变化。

相关案例：点击查看


——set

  • visibility ：控制可见性效果的表达，数值包括visible｜hidden｜collapse｜inherit （创意应用：防止误触等）
  • 相关案例：点击查看

——animateTransform

  • translate ：控制路径和编组的位移
  • scale ：控制路径和编组的x，y轴缩放。（创意应用如伪翻转等）
  • rotate ：控制路径和编组的旋转
  • skewX ：控制路径和编组的 x 轴倾斜 （创意应用：台历翻阅等）
  • skewY ：控制路径和编组的 y 轴倾斜 （创意应用：书籍翻阅等）

相关案例：点击查看


——animateMotion

  • path ：单行/复杂轨迹动画，可通过 rotate 定义朝向。（创意应用：如轨迹飞行等。）

  • 相关案例：点击查看

其他一些SVG 重点参数特性：

  • （1）控制动画表现的 from ｜to｜ values｜fill｜additive｜ accumulate ｜calcMode｜begin｜end｜rotate(朝向控制) ｜repeatCount｜keyTimes｜keySplines｜restart｜ dur等均可用，但分号等代码需注意系统适配性问题。
  • （2）部分因 等受限的元素：use｜mpath｜by｜cliPath ｜filter
  • （3）相关受限当前在 下失效，关与他的应用规则微信团队正在斟酌中。
  • （4）叶子节点被深色模式跳过，因此可做为如原色显示、无缝布局、无标链接等高级品牌新媒体运营的唯一选择。

*部分内容参考来源：JZCreative