如何高效实现微信公众号正文页SVG交互式开发？

本文共计3666个文字，预计阅读时间需要15分钟。

现在许多公众号直接在正文中通过SVG交互动画增加文章的阅读互动体验，不再跳转H5。结合这一需求，本期分享如何开发交互式SVG，并嵌入微信公号正文页。设计师和前端开发者可参考。

现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验，而不再跳转H5。结合这一需求，本期分享的内容是如何开发交互式SVG，并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了，短平快地赚小钱钱。

先看下最终SVG交互效果：

(体验公众号正文页实际效果，请到本文底部扫码关注公众号)

1 为什么公众号需要交互SVG

技术要有落地的应用场景才能发挥实效。为什么很多公众号开始做SVG交互而放弃H5呢？

主要原因有两点：

1. H5制作成本高，需要一定的开发周期和服务器支撑。
2. 从正文页跳转H5页面多了一个步骤，容易造成用户流失。

当然，对于需要复杂交互，或者更多功能的话，还是需要单独开发H5。

SVG虽然只能实现简单的交互，但既能增加交互体验又不会太分散用户对内容的关注点，在很多场景下还是很有需求的。

2 应用场景

SVG交互本质还是基于SVG SMIL animation，配合SVG的click事件，实现非常简单的交互。

虽然实现的效果很有限，但还是有很多发挥空间的，比如以下应用场景：

• 点击车子后，车子移动，经过某个位置显示某个特性或地点名称文案。
• 点击某个选项后，出现选择结果。