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

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

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

背景：

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

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

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

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

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

主要技术：

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

原理如下图：

题目卡片一张张叠加在一起，并把答案藏于屏幕外，通过点击卡片上的按钮，把卡片移除，并把答案移入屏幕。如下图：

题目1跟它的答案1通过便签归组管理，其他题目也是类似的处理方式。

全部代码下载可以在付费社群--知识星球里获取。

1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球里;

2 我会在知识星球发一些非常机密的研究心得;

3 一些非常有技巧的知识，给付费用户;

4 公众号的迭代版本，针对文章发更为升级、核心的内容。

5 当然，还有资深的专家在星球里。

如何复制到微信公众号文章里？

方法1:

使用在线的微信文章编辑器html功能，把svg的代码贴入，然后预览，全选复制，到微信公众号文章编辑界面粘贴即可。 在线编辑器的功能基本来源于百度开源的umeditor编辑器；

方法2:

如何制作svg？

如果是mac可以用sketch，如果是window，用Adobe Illustrator,当然也可以通过写代码，把设计好的svg模版固定下来，自动生成其他类似的svg。

以下为广告：

聚集各路跨界能手——有各领域的设计师、程序员、算法专家。

也许我们可以一块做点好玩的事情。如需入群可以联系我。

关于：

本公众号定期更新人工智能&设计&科技内容。

谈点设计，敲点代码，偶尔创作点人工智能实验产品。