公众号文章里使用svg进行交互

前言

最近看到一个案例，初看的时候对产品经理说很简单，是一个长页面，底图上有按钮，按了之后有素材动效，这对于前端来说是最基础的功能。后来定睛一看发现，还有微信阅读数和评论，发现事情并不简单。整个交互层全都在公众号文章里，这可是新鲜，翻了一下评论发现有不少同行在问是如何实现的，结果作者很得意地笑而不答，直到看到有人提到svg。有关键字就好办了，上网一查确实是黑科技，利用了微信文章富文本编辑的一个——漏洞？亲自上手之后发现确实可行，写一个简单的教程希望对大家有所帮助。

准备工作

• 大家要有订阅号或服务号，能正常发送公众号文章；
• 在线svg编辑工具、html编辑器，在做正式推送的时候方便调试；
• 背景图片，推荐实际像素在640px+，其作用是设置svg的css->background。

编写svg

svg标签最外层如下：

<svg style="display: inline-block;width: 100%;background-image:url("https://mmbiz.qpic.cn/mmbiz_jpg/3ncjibLbkcT5B5AVicjgw06P2biaywPFGEGOiaHao8M8dXByoZULpicK9w0ctICMiak5AzsKB5qCcVw2hicS51NPkUIhA/640?wx_fmt=jpeg");background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
</svg>

这里要注意的是必须使用微信素材库内的图片，因此需要事先将背景图存入素材库。微信素材库内的图片不可在外部引用，因此直接在外部编辑器打开这个svg是无法正常显示背景图的，不过不用担心，最终在微信渲染的版本会正常显示

还有一个要点就是viewBox这个属性，对svg舞台有了解的同学应该知道这个viewBox的具体工作原理，viewBox="x,y,width,height"x和y控制svg元素内的基准点，width和height控制viewBox的分辨率，svg的实际宽高需要在style属性内设置。

接着使用g标签控制svg内的分组：

<svg 属性省略>
<g transform="translate(200,220)" style="opacity:0.1"></g>
</svg>

<g>标签中控制transform需要用专门的transform属性，否则svg的动画无法正常运作，这里设置了css的透明度，是为了之后展示animate和animateTransform用法的区别。

接着添加内部的svg，通常使用<path>标签，其中的d属性表示绘制路径，这里涉及起始点、结束点、直线点、贝塞尔曲线中间点等信息，手绘难度很大，所以切图时建议切成svg格式并导出，把绘制路径复制到属性内就可以了，目前的svg如下：

<svg 属性省略>