最近更新了一波轻交互的公众号文章：
第一期 超简单的AI自测题
第二期 喵星人密信
第三期 vim答题卡
第四期 猜拳
今天开始陆续更新一些教程《通过svg标签实现文章的点击交互功能》。
背景：
微信文章只能放阉割版的svg，例如use标签不能使用，标签里的id会被清除等。
我是如何发现svg哪些内容被阉割的？
通过谷歌开发者工具，查看微信文章保存前后的svg标签变化，可以方便的看出保存的时候哪些svg标签被去除了。
点击交互功能的基本原理：
通过svg标签的动画标签<animate>实现动画。<animate>是实现 svg 动画的基本标签，将<animate>标签放在某个元素的标签中，即可对该元素添加动效。
主要技术：
第一期《 超简单的AI自测题》里主要使用了这个标签：
代码语言：javascript复制<animateTransform
attributeName="transform"
type="translate"
values="0 0;-640 0"
fill="freeze"
begin="click .5s"
dur=".5s">
</animateTransform>原理如下图：
题目卡片一张张叠加在一起，并把答案藏于屏幕外，通过点击卡片上的按钮，把卡片移除，并把答案移入屏幕。如下图：
题目1跟它的答案1通过<g>便签归组管理，其他题目也是类似的处理方式。
全部代码下载可以在 付费社群--知识星球 里获取。
1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球里;
2 我会在知识星球发一些非常机密的研究心得;
3 一些非常有技巧的知识，给付费用户;
4 公众号的迭代版本，针对文章发更为升级、核心的内容。
5 当然，还有资深的专家在星球里。
如何复制到微信公众号文章里？
方法1:
使用在线的微信文章编辑器html功能，把svg的代码贴入，然后预览，全选复制，到微信公众号文章编辑界面粘贴即可。 在线编辑器的功能基本来源于百度开源的umeditor编辑器；
方法2:
在谷歌开发者工具里直接修改微信图文的代码，位于<body>……</body>标签中。
如何制作svg？
如果是mac可以用sketch，如果是window，用Adobe Illustrator,当然也可以通过写代码，把设计好的svg模版固定下来，自动生成其他类似的svg。
