編輯喵先生跟我說他想實現一個想法,想在微信公衆號文章中實現一個效果,點擊圖片,顯示文字。問我可不能夠作到。css
svg中使用png圖片做爲填充,同時加上文字,並設置文字動畫效果html
<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>