详细教你微信公众号正文页SVG交互开发

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

先看下终极SVG交互结果：

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

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

首要缘由有两点：

1. H5建造本钱高，需要一定的开辟周期和办事器支持。
2. 从正文页跳转H5页面多了一个步调，轻易形成用户流失。

固然，对于需要复杂交互，大概更多功用的话，还是需要零丁开辟H5。

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

2 利用处景

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

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

1. 【汽车宣传】点击车子后，车子移动，经过某个位置显现某个特征或地址称号文案。
2. 【心理测试】点击某个选项后，出现挑选成果。
3. 【拆红包】一层一层拆掉红包，显现最里面内容。
4. 【密码解锁】点击指定的几个数字后，显现解锁内容。
5. 【猜灯谜】点击后显现内容，类似翻牌。

下面起头讲授本期Demo的建造全进程。

3 素材建造

3.1 布景图片

利用PS等软件设想SVG的布景图，倡议宽度为640px~750px，也可以更高，但文件巨细也会增加。本例建造了 640px x 800px 的jpg布景图：

3.2 SVG素材

可以去阿里巴巴矢量图库(https://www.iconfont.cn/)网站下载。也可以自行利用AI建造。但需要留意控制好SVG的图片尺寸。SVG的图片的尺寸即点击地区，所以控制好图片中空余的留白地区。

本Demo从阿里矢量库中下载了爆竹SVG，下载后用AI翻开，缩小图片的尺寸：

3.3 导出SVG

由于微信编辑器不答应嵌入 <style><script>标签，所以经过AI导出SVG的时辰要停止一下设备：

把Styling挑选为Presentation Attributes，这样导出的SVG就不含有 <style>，而且元素的款式也会经过标签属性停止设备，而不利用style内联css。

4 构建SVG

4.1 SVG根基结构

这里的style均为根本的CSS，就不再详述了。

首要说下viewBox属性：

viewBox="x, y, width, height"

x、y 控制SVG内一切元素的位移（不影响SVG的布景图）。

width、height 并不是SVG的现实宽高，而是SVG内的“分辨率”。width、height越大，SVG内的元素越小，反之，元素则越大（不影响SVG的布景图）。

倡议viewBox的x、y设备为0，width、height设备为布景图的尺寸。

4.2 放入笔墨

先利用 <text>加入笔墨：

经过调剂x、y把位置调好，fill为笔墨色彩，style设备字号。

4.3 加入笔墨动效

现在实现笔墨的闪灼结果。这里需要利用 <animate>和 <g>标签。

先容下 <animate>：

attributeName，为动画控制的属性，这里为opacity通明度。

begin，为动画起头时候，可以了解为提早时候。0s暗示立即起头动画。也可以是分号分隔的一组值，例如beigin="3s;5s"，暗示的是3s以后动画起头，6s时辰动画再重新起头（假如之前动画没走完，会立即停止重新起头）。

dur，为动画时候，dur越小，动画越快。

values，暗示attributeName指定属性的值变化,可所以一个值，也可以是用分号分隔的多个值，这里的"1;0;1"暗示“不通明->通明->不通明”，即闪灼结果。

repeatCount，暗示动画反复次数，indefinite=无数次

<g>标签很简单，就是把包起来的元素打成组合，这样animate就只针对<g>内的元素履行动画了。

结果以下：

4.4 从SVG提取爆竹代码

翻开AI天生的SVG文件，只取爆竹的矢量途径代码：

4.5 加入爆竹

加入爆竹代码，利用停止包裹，然后经过调理的translate调理位置。

4.6 建造愿望牌SVG

经过AI建造愿望牌SVG，记得经过Command+Shift+O，把笔墨转化为矢量。然后依照3.3章节导出SVG。

4.7 加入愿望牌

愿望牌是在爆竹升天后显现的，现实上是盖在了爆竹前面，爆竹并没有消失。所以愿望牌的代码应当写在爆竹代码的前面。从SVG提取愿望牌代码参照4.4章节，并调理位置，加入后的代码以下：

结果以下，愿望牌完全盖住了爆竹：

4.8 设备愿望牌初始属性

由于愿望牌初始状态未不偏见，所以将opacity设为0。

5 SVG点击交互

5.1 爆竹升天

我们要实现的是经过“一次点击”，爆竹上天，然后愿望牌出现。爆竹和愿望牌要打成组。

接下来，利用实现click触策动画。

关键属性讲授：

type， attributeName="transform"的值，可所以 translate、scale、rotate、skewX、skewY。

fill，动画间隙的添补方式。支持参数有：freeze、remove。remove是默许值，暗示动画竣事间接回到起头的地方。freeze暗示动画保持竣事后的状态。

restart，支持的参数有always、whenNotActive、never。always是默许值，暗示每点一次重新履行动画；whenNotActive暗示动画正在停止的时辰不能重启动画；never暗示动画仅履行一次。

begin，提早时候，上面已讲过，这里补充下click，暗示点击后立即触发，click+2暗示点击后2秒触发。

现在我们已经实现了点击爆竹后升天的结果，可是愿望牌还处于不偏见状态。这里就用到“click+时候”的玩法。

5.2 愿望牌显现

在愿望牌的内加入，由于爆竹升天动画是0.5s，所以click+0.5恰好是爆竹动画竣事后显现愿望牌。

※注：请留意设备begin=click的元素和设备begin=click+0.5的元素的层级关系。首先，click元素和click+0.5元素要处于同一个内；其次，click+0.5元素层级要比click元素的层级更深，所以可以正确的对应同一个click事务。

5.3 完成残剩爆竹

剩下两个爆竹，只需依照以上步调，替换愿望牌的图片，然后调剂元素位置即可，不再赘述。

6 导入微信公众号

6.1 上传布景图素材

以上代码中的布景图我们用的是当地的途径，需要上传至微信背景，获得线上地址。进入微信公众平台，点击左侧的素材治理->图片->上传:

上传成功后，翻开图片，获得图片的线上地址：

6.2 导入微信文章正文

新建图文消息，先输入好题目、作者，上传好封面图。然后在正文地区输入两行笔墨（微信要求正文必须含有笔墨）。

翻开chrome调试工具，定位到第二行笔墨：

在第二行笔墨代码处，右击鼠标挑选Edit as HTML:

替换为我们的SVG代码：

然后随意点击下其他元素的代码，偶然能够会自动撤消，假如出现这类情况，再重新粘贴一次就行。

完成后，便可以公布预览啦。

6.3 留意事项

微信编辑器有很多默许的“潜法则”，能够会拒绝我们嵌入的代码，假如被拒，我们嵌入的代码将会被删除大概替换成其他的标签。这里列出我试探出来的“潜法则”。

1. 标签里的 background的url()里，地址不能加引号，单引号双引号都不可，否则会被微信编辑器过滤掉。
2. 标签里不能有id。
3. 不能有 <style><script><a>标签。

后续有新的发现会继续更新。

6.4 奇葩BUG及技能经历

1. 微信Android客户真个公众号正文页里点击元素，停止移动动画后，元素能够会出现希奇的边框。需要给触及到的元素的<g>设备style="outline:none"，包括<g>内的一切子<g>。

2. SVG图片的圆心

在用AI设想SVG的时辰，最好把元素的圆心设备在SVG的中点，否则在实现rotate动画时，圆心偏离将致使元素扭转出现题目。虽然可以经过from和to的前面两个参数调理圆心位置，可是很是难手动找到切确的位置。

6.5 参考文献

张鑫旭的博客《超级强大的SVG SMIL animation动画详解》

https://www.zhangxinxu.com/wordpress/2022/08/so-powerful-svg-smil-animation/

SVG参考

https://www.runoob.com/svg/svg-reference.html

6.6 完整HTML代码

请前往我的github检察: https://github.com/Yuezi32/weixin_svg_demo

本文在同步公布在“掘金”和“简书”。

掘金：https://juejin.im/post/5d37e1fce51d455d88219fca

简书：https://www.jianshu.com/p/8c2e4fc26e8a

以上就是本期的分享内容，感激旁观。实时获得最新出色文章，接待关注我的小我公众号^_^

http://weixin.qq.com/r/JzpyaiDEpH3brWQJ9281 (二维码自动识别)