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