3

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

laihaibo
110 声望6 粉丝

ai chi xinxian meishaonv de datui