微信公众号图文 点击显示图片效果

svg 动画参考：

https://blog.csdn.net/chy555chy/article/details/53535581

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL#Animating_the_transform_attributes

微信公众号图文 点击显示图片效果：

rect 图形可对其操作x,y坐标，path路径需要修改path。

rect —— 点击显示图片，并且svg移动位置，使点击操作只执行一次。

path —— 点击使svg消失，并且移动位置，使点击操作只执行一次。

            
                M690.9,426.9c35.3-36.6,57.2-87.2,57.2-143.1c0-111.7-87.3-202.2-195-202.2s-195,90.6-195,202.2
                    c0,64.9,29.5,122.6,75.3,159.7c-108.9,56.2-183.8,172.7-183.8,307.3c0,189.6,148.4,343.2,331.5,343.2s331.5-153.7,331.5-343.2
                    C912.5,601.1,820,473.8,690.9,426.9z">


                

            
            
            
            
            

　
  
  
  

注意动画对应的时间是不同的

begin="2s" 是指开始后2s

begin="op1.end" 与

begin="circle.click+2s" 都是指点击后2s

转载于:https://www.cnblogs.com/echolife/p/10552889.html