写 SVG 动画必看！SVG系列文章4-微信公众号编写

1、基础设置

1.1 上传背景图素材

使用到的图片需要上传至微信后台，获取线上地址：

1.2 导入微信文章正文

新建图文消息，先输入好标题、作者，上传好封面图。然后在正文区域输入点文字，打开 chrome 调试工具，定位到该文字，右击鼠标选择Edit as HTML，替换为我们写好的SVG代码：

2、微信公众号的坑

1. 在部分标签中，animation 标签无法设置（只有 set 可以），保存后自动被清除， image 中可以
2. 标签里的 background 的 url() 里，地址不能加引号，单引号双引号都不行，否则会被微信编辑器过滤掉
3. 标签里不能有 id，微信编辑器会自动过滤
4. 不能 有 <style> | <script> | <a> 标签
5. 点击事件的穿透率只有 600ms，结束后不会触发深层点击事件
6. 部分元素在公众号可能会出现边框，需要给涉及到的元素的 <g> 设置 style="outline:none"，包括 <g> 内的所有子 <g>

3、实现效果

可以使用手机点开我写的 SVG demo：测试 SVG 动画 DEMO

查看更多实现效果，可以查看这篇文章：案例库 | 微信SVG交互图文2020版