如何制作《超简单的AI自测题》

最近更新了一波轻交互的公众号文章：

第一期 超简单的AI自测题

第二期 喵星人密信

第三期 vim答题卡

第四期 猜拳

今天开始陆续更新一些教程《通过svg标签实现文章的点击交互功能》。

      背景：

微信文章只能放阉割版的svg，例如use标签不能使用，标签里的id会被清除等。

      我是如何发现svg哪些内容被阉割的？

通过谷歌开发者工具，查看微信文章保存前后的svg标签变化，可以方便的看出保存的时候哪些svg标签被去除了。

      点击交互功能的基本原理：

通过svg标签的动画标签<animate>实现动画。<animate>是实现 svg 动画的基本标签，将<animate>标签放在某个元素的标签中，即可对该元素添加动效。

      主要技术：

第一期《 超简单的AI自测题》里主要使用了这个标签：

<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 当然，还有资深的专家在星球里。