用svg动画实现图片点击效果以便在公众号文章中使用
需求
编辑喵先生跟我说他想实现一个想法，想在微信公众号文章中实现一个效果，点击图片，显示文字。问我可不可以做到。
困难
- 微信公众号的编辑器无法嵌入css代码和js代码
- 微信公众号编辑器无法编辑html代码，只能放入纯图片
方法
svg中使用png图片作为填充，同时加上文字，并设置文字动画效果
实现
坑
- image标签设置图片url会不显示，所以将png/jpg转base64编码
- animate标签嵌入到text标签内，否则其他的元素也会旋转
- opacity首先要设置为0，否则初始的时候会出现
- fill属性设置为freeze，否则opacity又会变成0
Code
<svg id="svg" width="320" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs> <pattern id="avatar" width="100%" height="100%" patternContentUnits="objectBoundingBox"> <image width="1" height="1" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgA"/> </pattern></defs><rect id="circle" x="0" y="0" width="320" height="200" fill="url(#avatar)"/><text font-family="microsoft yahei" font-size="120" y="160" x="160" opacity="0">马<animate attributeName="opacity" from="0" to="1" begin="circle.click" fill="freeze" dur="3s" /></text>
</svg>