前言

最近看到一个案例，初看的时候对产品经理说很简单，是一个长页面，底图上有按钮，按了之后有素材动效，这对于前端来说是最基础的功能。后来定睛一看发现，还有微信阅读数和评论，发现事情并不简单。整个交互层全都在公众号文章里，这可是新鲜，翻了一下评论发现有不少同行在问是如何实现的，结果作者很得意地笑而不答，直到看到有人提到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 属性省略>
<g transform="translate(200,220)" style="opacity:0.1">
<path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" />
</g>
</svg>

接下来再添加动效，先添加<animate>标签<animate attributeName="opacity" values="0.1;1" dur="1s" begin="click"/>
animate是用来控制非transform属性的css属性，具体大家可以参考animate标签MDN文档attributeName是css的属性名称，我直接使用value属性控制值的渐变过程，大家也可以使用from，to属性来控制，begin可以设置为某一秒，也可以设置click事件，即用户点击开始动画。

再添加<animateTransform>标签:

<animateTransform attributeName="transform" type="translate" from="0 0" to="-47 -38" dur="1s" additive="sum" begin="click"></animateTransform>
<animateTransform attributeName="transform" type="scale" from="1" to="3" dur="1s"  additive="sum" begin="click"></animateTransform>

<animateTransform>标签在控制scale的时候会以图形的(0,0)点作为基准点，可以通过transformOrigin设置也可以像我一样添加一个反向位移的动画相互抵消，最终的结果是按中心放大，这里需要注意的是translate的结束值，需要根据图形的具体大小来设置，方向都为负。到这里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"><g transform="translate(200,220)" style="opacity:0.1"><animateTransform attributeName="transform" type="translate" from="0 0" to="-47 -38" dur="1s" additive="sum" begin="click"></animateTransform><animate attributeName="opacity" values="0.1;1" dur="1s" begin="click"/><animateTransform attributeName="transform" type="scale" from="1" to="3" dur="1s"  additive="sum" begin="click"></animateTransform><path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" />
</g>
</svg>

点击中间的图形，看一下效果：

添加至微信

打开微信文章编辑页，由于微信规定文章必须有文本，我们随便写点介绍或引导语就ok了：

按f12打开开发者模式指向对应的任意一段富文本内容元素，选择edit as html：

将刚才编辑好的svg全部替换进去：

点击其他元素失焦以让html保存修改，看到编辑页面已经有正常显示，并且已有点击互动效果：

最后记得点击保存按钮。这里还有一点要注意，background-image:url()里的url不能加引号，否则图片地址会被强转，引号会变成&quot。

有了这个功能之后就不用再去开发一个h5再做跳转了，用户可以直接在当前页评论互动，不需要将资源挂载到服务器，节省开发成本和开发时间。应用场景可以有：

长图+交互
选择题选后展示答案
开幸运饼
拆信类动画展示
互动游戏
。。。

用在公众号里会很吸引眼球，快去试试吧！

长图+交互
选择题选后展示答案
开幸运饼
拆信类动画展示
互动游戏
。。。

用在公众号里会很吸引眼球，快去试试吧！

【转载请注明出处】

公众号文章里使用svg进行交互相关推荐

怎么在微信公众号文章里添加附件(如word、excel、pdf等)
您是否想在自己的公众号文章插入一些资料分享呢?单位的公众号文章需要添加招聘录用表格怎么办?学校的公众号需要在开学通知文章中插入健康承诺书文档怎么办呢? 我们作为一个公众号运营者都知道,在微信公众号中发 ...
网页外链微信公众号文章里的图片显示未经许可无法显示的解决办法
客户一些微官网的文章里的图片需要外链用公众号里的相关图片,一般情况下是显示此图片来自公众号,未经许可不能显示之类的,肿么办... 有了,在网页的<head>里加这么一句话: <me ...
批量获取微信公众号文章里的图片
有人在群里转了一本书电子版的公众号,想把里面的图片都下下来做成PDF文档电商图片助手下载:http://www.pc6.com/softview/SoftView_584608.html 转载自:微 ...
公众号文章排版神器，Markdown一键排版，微信公号文章里代码的美化排版
自己经常在简书,掘金上面写一些技术文章,喜欢用Markdown编辑器.最近需要把自己的一些技术博客文章发表到微信公众号文章里. 刚开始偷懒,就直接把用markdown写的技术博客复制粘贴到公号里(大多 ...
如何获取公众号中html,[技巧] 如何获取公众号图文里的视频地址
读公众号文章的时候,有时会非常喜欢文章里插入的视频,想在其他地方引用或者保存,如果在百度或者腾讯视频里搜索不方便找到视频,通过公众号文章导出其插入的视频的地址就是一个直接有效的方法. 如何导出公众号文 ...
keil生成hex文件找不到_骚操作！用Python把公众号文章打包成pdf文件，再也不怕找不到了...
背景做自媒体的人,尤其是做了一年甚至更久的自媒体人,尤其是通过自媒体还有一些小收入的人,他们最怕自己的公众号内容因为各种原因而丢失,那就太可怕了! 在做自媒体内容上花了太多心血,如果突然一下就没了, ...
微信公众号文章怎么插附件
日常中,很多公众号运营者希望公众号能支持上传一些文档(如Word文档,Excel表格,PDF文件等)在公众号作为附件给粉丝用户下载.众所周知,微信公众号并不支持在文章中插入附件,那么我们可以借助&qu ...
如何编辑出一篇漂亮的微信公众号文章
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 1 问题描述在信息化爆炸的今天,社会化网络的趋势越来越明显, ...
简述如何编辑出一篇漂亮的微信公众号文章
简述如何编辑出一篇漂亮的微信公众号文章 1 问题描述在信息化爆炸的今天,社会化网络的趋势越来越明显,人们越来越喜欢使用微信来作为关注好友家人的桥梁,移动互联网基于智能手机和现代信息技术,它将发展 ...

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

前言

准备工作

编写svg

添加至微信

公众号文章里使用svg进行交互相关推荐

最新文章

热门文章