现在很多"大众年夜众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验，而不再跳转H5。结合这一需求，本期分享的内容是如何开拓交互式SVG，并嵌入微信"大众号正文页。设计师和前端开拓同学都可以来学习下。学会了可以接这方面的私活了，短平快地赚小钱钱。
先看下终极SVG交互效果：
体验微信"大众号正文页实际效果，请关注微信公众号：卧梅又闻花。
查阅文章《详细教你微信"大众号正文页SVG交互开拓》
技能要有落地的运用处景才能发挥实效。为什么很多"大众号开始做SVG交互而放弃H5呢？
紧张缘故原由有两点：
H5制作本钱高，须要一定的开拓周期和做事器支撑。从正文页跳转H5页面多了一个步骤，随意马虎造成用户流失落。当然，对付须要繁芜交互，或者更多功能的话，还是须要单独开拓H5。
SVG虽然只能实现大略的交互，但既能增加交互体验又不会太分散用户对内容的关注点，在很多场景下还是很有需求的。
2 运用处景SVG交互实质还是基于SVG SMIL animation，合营SVG的click事宜，实现非常大略的交互。
虽然实现的效果很有限，但还是有很多发挥空间的，比如以下运用处景：
【汽车宣扬】点击车子后，车子移动，经由某个位置显示某个特性或地点名称文案。【生理测试】点击某个选项后，涌现选择结果。【拆红包】一层一层拆掉红包，显示最里面内容。【密码解锁】点击指定的几个数字后，显示解锁内容。【猜字谜】点击后显示内容，类似翻牌。下面开始讲解本期Demo的制作全过程。
3 素材制作3.1 背景图片
利用PS等软件设计SVG的背景图，建议宽度为640px~750px，也可以更高，但文件大小也会增加。 本例制作了 640px x 800px 的jpg背景图：
3.2 SVG素材
可以去阿里巴巴矢量图库(www.iconfont.cn)网站下载。也可以自行利用AI制作。 但须要把稳掌握好SVG的图片尺寸。SVG的图片的尺寸即点击区域，以是掌握好图片中空余的留白区域。
本Demo从阿里矢量库中下载了炮竹SVG，下载后用AI打开，缩小图片的尺寸：
3.3 导出SVG
由于微信编辑器不许可嵌入<style><script>标签，以是通过AI导出SVG的时候要进行一下设置：
把Styling选择为Presentation Attributes，这样导出的SVG就不含有<style>，而且元素的样式也会通过标签属性进行设置，而不该用style内联css。
4 构建SVG4.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元素要处于同一个<g>内；其次，click+0.5元素层级要比click元素的层级更深，以是能够精确的对应同一个click事宜。
5.3 完成剩余炮竹
剩下两个炮竹，只需按照以上步骤，更换欲望牌的图片，然后调度元素位置即可，不再赘述。
6 导入微信"大众年夜众号6.1 上传背景图素材
以上代码中的背景图我们用的是本地的路径，须要上传至微信后台，获取线上地址。 进入微信公众平台，点击左边的素材管理->图片->上传:
上传成功后，打开图片，获取图片的线上地址：
6.2 导入微信文章正文
新建图文，先输入好标题、作者，上传好封面图。 然后在正文区域输入两行笔墨（微信哀求正文必须含有笔墨）。
打开chrome调试工具，定位到第二行笔墨：
在第二行笔墨代码处，右击鼠标选择Edit as HTML:
更换为我们的SVG代码：
然后随便点击下其他元素的代码，有时可能会自动撤销，如果涌现这种情形，再重新粘贴一次就行。
完成后，就可以发布预览啦。
6.3 把稳事变
微信编辑器有很多默认的“潜规则”，可能会谢绝我们嵌入的代码，如果被拒，我们嵌入的代码将会被删除或者更换成其他的标签。这里列出我摸索出来的“潜规则”。
标签里的background的url()里，地址不能加引号，单引号双引号都弗成，否则会被微信编辑器过滤掉。标签里不能有id不能有<style><script><a>标签。后续有新的创造会连续更新。
6.4 奇葩BUG及技巧履历
【奇葩BUG】
微信Android客户真个"大众年夜众号正文页里点击元素，进行移动动画后，元素可能会涌现奇怪的边框。须要给涉及到的元素的<g>设置style="outline:none"，包括<g>内的所有子<g>
【技巧：SVG图片的圆心】
在用AI设计SVG的时候，最好把元素的圆心设置在SVG的中点，否则在实现rotate动画时，圆心偏离将导致元素旋转涌现问题。虽然可以通过from和to的后面两个参数调节圆心肠位，但是非常难手动找到精确的位置。
6.5 完全HTML代码
请前往我的github查看:
https://github.com/Yuezi32/weixin_svg_demo
以上便是本期的分享内容，感谢不雅观看。