用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

<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>