用svg动画实现图片点击效果以便在公众号文章中使用

用svg动画实现图片点击效果以便在公众号文章中使用

需求

编辑喵先生跟我说他想实现一个想法，想在微信公众号文章中实现一个效果，点击图片，显示文字。问我可不可以做到。

困难

1. 微信公众号的编辑器无法嵌入css代码和js代码
2. 微信公众号编辑器无法编辑html代码，只能放入纯图片

方法

svg中使用png图片作为填充，同时加上文字，并设置文字动画效果

实现

坑

1. image标签设置图片url会不显示，所以将png/jpg转base64编码
2. animate标签嵌入到text标签内，否则其他的元素也会旋转
3. opacity首先要设置为0，否则初始的时候会出现
4. fill属性设置为freeze，否则opacity又会变成0

Code