现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验，而不再跳转H5。结合这一需求，本期分享的内容是如何开发交互式SVG，并嵌入微信公众号正文页。设计师和前端开发同学都可以来参考。学会了可以接这方面的私活了，短平快地赚小钱钱。
先看下最终SVG交互效果：
可以去阿里巴巴矢量图库网站下载。也可以自行使用AI制作。但需要注意控制好SVG的图片尺寸。SVG的图片的尺寸即点击区域，所以控制好图片中空余的留白区域。
本Demo从阿里矢量库中下载了爆竹SVG，下载后用AI打开，缩小图片的尺寸：
把Styling选择为Presentation Attributes，这样导出的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 放入文字
先使用
通过调整x、y把位置调好，fill为文字颜色，style设置字号。
4.4 从SVG提取爆竹代码打开AI生成的SVG文件，只取爆竹的矢量路径代码：
4.6 制作愿望牌SVG通过AI制作愿望牌SVG，记得通过Command+Shift+O，把文字转化为矢量。然后按照3.3章节导出SVG。
4.8 设置愿望牌初始属性由于愿望牌初始状态未不可见，所以将opacity设为0。
我们要实现的是通过“一次点击”，爆竹上天，然后愿望牌出现。爆竹和愿望牌要打成组。
接下来，使用实现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调试工具，定位到第二行文字：
替换为我们的SVG代码：
2. SVG图片的圆心
在用AI设计SVG的时候，最好把元素的圆心设置在SVG的中点，否则在实现rotate动画时，圆心偏离将导致元素旋转出现问题。虽然可以通过from和to的后面两个参数调节圆心位置，但是非常难手动找到精确的位置。
张鑫旭的博客《超级强大的SVG SMIL animation动画详解》
https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/
SVG参考
https://www.runoob.com/svg/svg-reference.html6.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
免责声明：本平台仅供信息发布交流之途，请谨慎判断信息真伪。如遇虚假诈骗信息，请立即举报
举报
