用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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。