微信公众号图文 点击显示图片效果
Posted echolife
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信公众号图文 点击显示图片效果相关的知识，希望对你有一定的参考价值。
svg 动画参考：
https://blog.csdn.net/chy555chy/article/details/53535581
微信公众号图文 点击显示图片效果：
rect 图形可对其操作x,y坐标，path路径需要修改path。
rect —— 点击显示图片，并且svg移动位置，使点击操作只执行一次。
<section transform="translate(0 464)" style="width:375px;height: 464px;">
<section transform="translate(0 0)" style="width:375px;height: 464px;">
<img style="width:375px;height: 464px;" src="https://mmbiz.qpic.cn/mmbiz_jpg/DlRsNNaqlhcQkEnibz6TiarN6g5Jcd7BEwicsiahjicPJebhGgE9urrF4nLMCIIIK948rRh3p1LVDOTwzjbibAyrJJPA/0?wx_fmt=jpeg" >
</section>
<svg transform="translate(0 -464)" style="width:375px;height: 464px;">
<rect x="0" y="0" width="375px" height="464px" style="fill: #fff;">
<animate id="op1" attributename="opacity" begin="click" dur="2s" from="1" to="0" fill="freeze" repeatCount= "1"></animate>
<animate attributename="x" begin="op1.end" dur=".1s" from="0" to="-375px" fill="freeze" repeatCount= "1"></animate>
</rect>
</svg>
</section>
path —— 点击使svg消失，并且移动位置，使点击操作只执行一次。
<g opacity="1" >
<g id="circle" style="fill:#FFE1DE;">
<path class="st0" d="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"></path>
<!-- <g style="fill:#EAA8A2;" >
<path d="M448,588.7v13.8h-3.8v-13c-4.3,0.9-8.3,1.7-11.7,2.4l-0.9-4c3.4-0.6,7.9-1.4,12.6-2.3v-9.2h-5.7
c-2.1,0-4,0.4-4.5,0.8c-0.2-0.7-0.8-2.7-1.2-3.7c0.9-0.2,1.8-2.3,2.8-5c0.7-1.5,2-5.8,3.3-10.9H432v-3.9h7.8c0.6-2.4,1-5,1.4-7.4
l4,0.9c-0.4,2.2-0.9,4.4-1.4,6.6h11.3v3.9h-12.3c-1.5,5.4-3.2,10.6-5.1,15h6.4v-9.6h3.8v9.6h6.5v3.8H448v8.6l7-1.4l0.2,3.7
L448,588.7z M473.7,597.2h13.8v3.8H455v-3.8h14.6v-15.7h-11.1v-3.8h26.3v3.8h-11.1V597.2z M485.4,574.8c-3.1-2.3-8.8-5.5-13.9-7.9
c-4.3,3.4-9.2,6.2-13.9,8.2c-0.6-1-1.8-2.5-2.6-3.3c8.7-3.5,18.2-10.4,23.2-18.4h-20.1v-3.8h22.6l0.7-0.2l2.9,1.5
c-2.3,5-5.8,9.5-9.9,13.2c4.8,2.4,10.2,5.3,13.2,7.3L485.4,574.8z"></path>
<path d="M527.9,597.8c0,1.7-0.3,2.8-1.5,3.4c-1.1,0.6-2.7,0.7-5.3,0.7c-0.1-1-0.6-2.4-1.1-3.4c1.8,0.1,3.3,0.1,3.8,0
c0.5,0,0.7-0.1,0.7-0.7v-10.5h-5.7V601h-3.2v-13.8h-6.1c-0.6,5.5-1.7,11.3-4.4,15.7c-0.6-0.6-2.2-1.5-3.1-1.9
c4-6.6,4.3-15.7,4.3-22.6v-11.6c-0.5,0.6-0.9,1.2-1.4,1.7c-0.6-0.7-2.2-1.9-3.2-2.5c4.4-4.8,7.9-12.2,9.8-19.8l3.9,0.9
c-0.4,1.5-0.9,3-1.4,4.6h8.4l0.6-0.2l2.5,1.6c-1.1,2.9-2.6,6.1-4.2,8.7h6.5V597.8z M512.7,555.1c-1,2.4-2,4.7-3.2,6.8h8.1
c1.1-1.9,2.3-4.5,3.1-6.8H512.7z M515.6,583.9V576h-5.8v2.4c0,1.7-0.1,3.6-0.1,5.5H515.6z M509.8,572.9h5.8v-7.7h-5.8V572.9z
M518.8,572.9h5.7v-7.7h-5.7V572.9z M524.5,583.9V576h-5.7v7.9H524.5z M555.5,602.6c-0.4-1.6-1-3.6-1.7-5.7
c-8.9,1.2-17.9,2.5-24.3,3.3l-0.6-4c3.3-0.4,7.6-0.9,12.3-1.5v-11.3h0.3v-2.2H531v-22.9h10.2v-11.9h4.2v11.9h10.5v22.9H545v2.2
h0.3v10.8l7-0.9c-1.1-2.5-2.3-5.1-3.6-7.4l3.3-1.1c3,5.2,6.1,12.2,7,16.4L555.5,602.6z M541.5,577.7v-15.8h-7.1v15.8H541.5z
M552.2,561.9H545v15.8h7.2V561.9z"></path>
<path d="M582.9,563.3v6c0,10.1-0.8,24.2-7.1,33.7c-0.7-0.7-2.5-1.9-3.5-2.3c6-9.1,6.5-21.8,6.5-31.4v-20h46.2v14
H582.9z M582.9,553v6.7h37.8V553H582.9z M628.5,588.2h-12v14.6h-4.1v-14.6h-13.3c-1.1,5.5-4.3,10.7-13,14.7
c-0.6-0.9-1.8-2.4-2.7-3c7.4-3.3,10.4-7.4,11.5-11.7H584v-3.6h11.5c0.1-0.9,0.1-1.8,0.1-2.7v-6.1h-10v-3.6h26.2
c1.5-2.5,3.3-5.9,4.3-8.2l4.2,1.2c-1.4,2.4-3,4.9-4.5,7h11v3.6h-10.3v8.9h12V588.2z M595.6,571.6c-0.9-1.6-2.5-4.3-3.8-6.3
l3.7-1.2c1.4,1.9,3,4.5,3.9,6L595.6,571.6z M612.4,584.7v-8.9h-12.8v6.2c0,0.9,0,1.7-0.1,2.7H612.4z"></path>
<path d="M685.1,581.9c4,3.3,9.9,6.3,15.3,7.7c-0.9,0.8-2,2.1-2.5,3.1c-2.5-0.8-5.2-2-7.7-3.5v7.8
c0,1.9-0.4,2.9-1.9,3.5c-1.4,0.6-3.8,0.5-7.6,0.5c-0.2-1-0.7-2.2-1.2-3.2c2.7,0.1,5.1,0.1,5.7,0.1c0.7-0.1,0.9-0.2,0.9-0.9v-6.9
h-12.6v12.5h-4v-12.5h-11.6v11.1h-4v-12.5c-2.4,1.5-5.1,2.9-8.2,4.1c-0.5-1-1.6-2.4-2.4-3c5.8-2.2,10.4-5,14.1-8h-13.3v-3.4h16.9
c1-1.2,1.9-2.4,2.7-3.5h-12v-16.9h40.5V575h-23.9c-0.7,1.2-1.5,2.4-2.4,3.5h33.3v3.4H685.1z M659.4,553.9h-14.8v-3.5h14.8v-4.1h4
v4.1h16.6v-4.1h4v4.1h14.9v3.5h-14.9v3h-4v-3h-16.6v3h-4V553.9z M655.8,565.2h32.5v-4.3h-32.5V565.2z M655.8,572.2h32.5v-4.3
h-32.5V572.2z M686.3,586.8c-2.1-1.5-4.1-3.2-5.6-4.9H663c-1.7,1.7-3.7,3.3-5.9,4.9h12.5v-3.7h4v3.7H686.3z"></path>
<animate attributename="fill" begin="0s" dur="1s" from="#EAA8A2" to="#fff" fill="freeze" ></animate>
</g>
<g style="fill:#EAA8A2;">
<path d="M354.8,644.4c0,5.7-0.8,13.7-4.8,19.4c-0.5-0.6-1.8-1.8-2.5-2.1c3.7-5.2,4.2-12.3,4.2-17.3v-7.5h22.4
c-0.2-1.7-0.3-3.4-0.4-5.2h3.2c0,1.8,0.1,3.5,0.3,5.2h8.6c-1.5-1.2-4-2.7-6.1-3.6l2-1.6c2.2,1,5,2.5,6.4,3.7l-1.6,1.5h5.8v2.8
h-14.8c0.6,4.9,1.8,9.2,3.2,12.5c2.3-2.9,4.1-6.2,5.5-9.8l3,0.7c-1.7,4.6-4.1,8.6-7,12.1c1.9,3.1,3.9,4.9,5.9,4.9
c1.2,0,1.7-1.8,1.9-6.4c0.7,0.6,1.9,1.2,2.6,1.4c-0.5,6.2-1.6,8-4.7,8s-5.8-2-8-5.5c-1.9,1.9-4,3.5-6.2,5
c-0.4-0.6-1.6-1.8-2.4-2.2c2.6-1.5,4.9-3.4,7.1-5.5c-1.9-4-3.3-9.2-4.1-15.1h-19.6V644.4z M347.6,674.4c2-2.3,4-6.2,5.2-8.8
l2.9,1.1c-1.4,2.7-3.2,6.6-5.1,9L347.6,674.4z M372.5,645.7h-15.6v-2.5h15.6V645.7z M371.6,659.3h-14v-10.5h14V659.3z
M376.9,674.2c2.8,0,3.2-0.8,3.5-6c0.8,0.5,2.1,1,3.1,1.2c-0.5,6.2-1.6,7.6-6.4,7.6h-11.8c-5.5,0-7-0.9-7-4.3v-8.5h3.3v8.5
c0,1.3,0.6,1.5,3.8,1.5H376.9z M368.9,651.3h-8.5v5.6h8.5V651.3z M368.5,662.1c2.4,2.2,5.4,5.5,6.8,7.5l-2.8,1.5
c-1.4-2.1-4.2-5.4-6.7-7.8L368.5,662.1z M386.2,664.5c2.1,2.8,4.6,6.7,5.6,9.2l-3.1,1.2c-1-2.5-3.3-6.5-5.4-9.5L386.2,664.5z"></path>
<path d="M435.1,656.4c-2.6,5.4-6.7,9.5-11.7,12.7c5.4,2.5,11.8,4.2,18.8,5.1c-0.7,0.8-1.6,2.2-2.1,3.1
c-7.6-1.1-14.4-3.2-20-6.4c-6.1,3.2-13.1,5.2-20.4,6.4c-0.4-0.8-1.3-2.2-1.9-3c6.9-1,13.5-2.7,19.1-5.3
c-4.3-2.9-7.9-6.5-10.5-10.7l0.2-0.1h-2.1v-3.1h27.6l0.6-0.2L435.1,656.4z M402.1,656.2h-3.2v-10.1h30.2c1.7-2.5,3.7-6.1,4.9-8.7
l3.3,1.1c-1.4,2.5-3.2,5.4-4.8,7.7h8.9v10.1H438v-7.1h-36V656.2z M438.3,634.3c-9.8,2.1-25.2,3.3-38.1,3.9c-0.1-0.8-0.5-2-0.8-2.8
c12.8-0.5,28.1-1.9,36.5-3.7L438.3,634.3z M406.4,638.5c1.5,2.1,3.1,4.9,3.6,6.7l-3,1c-0.6-1.9-2.1-4.8-3.5-6.9L406.4,638.5z
M410.1,658.2c2.5,3.6,5.9,6.7,10.1,9.1c4.1-2.4,7.6-5.4,10-9.1H410.1z M419.3,645.7c-0.3-2-1.4-5.2-2.6-7.5l3-0.6
c1.2,2.3,2.4,5.5,2.8,7.4L419.3,645.7z"></path>
<path d="M465.1,666.8c-6.2,1.6-12.7,3.4-17.5,4.7l-0.7-3.2c2-0.5,4.6-1.1,7.4-1.8v-12.7h-6.1v-3.1h6.1v-11h-6.7v-3.2
h16.8v3.2h-7v11h5.6v3.1h-5.6v11.8c2.4-0.6,4.8-1.2,7.3-1.9L465.1,666.8z M488.3,644.4c-1.8,8.5-4.5,15.2-8.4,20.5
c3.3,4.4,7.8,7.7,13.5,9.6c-0.8,0.6-1.8,2-2.3,2.9c-5.7-2.1-10.1-5.4-13.5-9.9c-3.9,4.2-8.7,7.4-14.9,10c-0.4-0.8-1.4-2.4-2-3.1
c6.3-2.3,11.2-5.5,14.9-9.8c-2.6-4.3-4.5-9.4-5.9-15.1c-1.2,2.5-2.6,4.8-4.1,6.7c-0.4-0.8-1.7-2.2-2.4-2.9
c4.2-5.2,7.2-13.3,8.8-21.6l3.4,0.7c-0.7,3-1.5,5.9-2.4,8.7h19.6v3.2H488.3z M471.9,644.8c1.2,6.5,3.2,12.3,6,17.1
c3.2-4.7,5.4-10.5,6.8-17.5h-12.6L471.9,644.8z"></path>
<path d="M525.5,646.3c4.5,4.5,11.5,8.8,17.6,10.9c-0.8,0.7-1.7,1.9-2.2,2.7c-6.7-2.7-14.4-8-19.1-13.6h0v10.1h-3.4
v-10.1h0c-4.6,6-12.2,11.5-18.9,14.2c-0.4-0.9-1.4-2-2.2-2.7c6.2-2.2,13-6.7,17.4-11.6h-16.5v-3h20.2v-5.6
c-5.2,0.6-10.5,0.9-15.4,1.2c-0.1-0.8-0.5-2-0.9-2.9c11.3-0.6,24.8-1.9,32-3.8l2.6,2.6c-4.1,1.1-9.4,1.9-15,2.6v5.9h20.4v3H525.5z
M505.5,657.8h29.9v19.5H532v-1.7h-23.2v1.8h-3.3V657.8z M508.8,660.5v4.8H532v-4.8H508.8z M532,672.8v-5h-23.2v5H532z"></path>
<path d="M573.2,632.8c-0.3,0.6-0.8,1.2-1.2,1.8c5,5.5,13.9,10.9,21.4,13.3c-0.8,0.7-1.8,2-2.3,2.9
c-7.2-2.7-15.6-8.2-21-13.9c-3.4,3.9-7.7,7.3-12.4,10h25.1v3.1h-11.1v7.1h17.8v3h-17.8v12.7h19.9v3.1h-43v-3.1h19.6V660h-17.4v-3
h17.4v-7.1h-10.9V647c-2.7,1.5-5.5,2.8-8.3,3.9c-0.5-1-1.4-2.2-2.3-3c9.4-3.1,18.6-9.1,23.3-16.5L573.2,632.8z M558,661.4
c2,2.8,4,6.7,4.8,9.1l-2.9,1.2c-0.8-2.4-2.7-6.3-4.7-9.2L558,661.4z M576.5,670.7c1.8-2.5,4-6.5,5.3-9.4l3.2,1.3
c-1.9,3.1-4.2,6.8-6,9.2L576.5,670.7z"></path>
<path d="M605.3,653.6c-1.7-1.5-5.1-3.7-7.9-5.1l1.8-2.1c2.7,1.2,6.2,3.3,7.9,4.8L605.3,653.6z M608.1,660.6
c-2,5.1-4.5,11-6.8,15.4l-2.8-1.9c2-3.8,5-10,7-15.4L608.1,660.6z M607.3,640.9c-1.6-1.7-4.9-4.1-7.6-5.7l1.9-2.2
c2.6,1.5,6,3.9,7.6,5.5L607.3,640.9z M621.7,663.8c-2.4,6.1-7.9,10.5-13.3,12.7c-0.3-0.7-1.1-1.8-1.7-2.4
c4.2-1.5,8.5-4.6,10.9-8.4H609v-2.6h10.4l0.5-0.1L621.7,663.8z M609.5,651.8v-2.7h14.9v-3.3h-11.5v-2.5h11.5v-3.1h-13.2v-2.7h7.9
c-0.8-1.5-2.3-3.4-3.7-4.8l2.6-1.2c1.6,1.5,3.3,3.6,4,5.1l-1.7,0.9h9.2c1.4-1.7,2.9-4.1,3.8-5.9l3,1.1c-1,1.7-2.2,3.4-3.2,4.8h8.2
v2.7h-13.7v3.1H640v2.5h-12.5v3.3h15v2.7H609.5z M641.6,660.3c-2.8,2.3-6.3,4.8-9.3,6.6c2.9,3,6.5,5.2,10.8,6.3
c-0.7,0.6-1.6,1.8-2,2.6c-5.9-2-10.5-5.8-13.6-10.9v8.9c0,1.7-0.3,2.5-1.5,3c-1.3,0.5-3.4,0.5-6.7,0.5c-0.1-0.8-0.5-2-1-2.8
c2.5,0.1,4.7,0.1,5.2,0c0.7,0,0.9-0.2,0.9-0.8v-13.6h-10v-2.7h13.1v1.9c0.8,2.1,1.9,4,3.2,5.7c2.9-1.8,6.5-4.5,8.6-6.5
L641.6,660.3z M631.9,657.8c-3.3-1.5-9.4-3.2-14.4-3.8l1.5-2.2c4.8,0.6,11,2.2,14.4,3.5L631.9,657.8z"></path>
<path d="M660.9,632.4c-0.8,2.5-1.8,5.2-2.7,7.4h8.5v32.3h-14v4h-3.1v-36.3h5.6c0.8-2.4,1.8-5.8,2.2-8.1L660.9,632.4z
M663.7,642.8h-11v10.9h11V642.8z M663.7,669.1v-12.4h-11v12.4H663.7z M691.2,641.4c-0.8,23-1.5,30.6-3.5,33
c-1,1.4-2.2,1.8-3.8,1.9c-1.7,0.2-4.6,0-7.4-0.1c-0.1-1-0.5-2.4-1.1-3.2c3.2,0.3,6.3,0.3,7.4,0.3c1,0,1.6-0.1,2.1-0.8
c1.6-1.8,2.5-9.5,3.1-29.8h-13.1c-1.4,3.4-3,6.5-4.7,8.9c-0.6-0.5-2-1.4-2.8-1.8c3.4-4.5,6.1-11.4,7.7-18.3l3.2,0.7
c-0.7,2.5-1.4,5-2.2,7.4h15.2V641.4z M680.6,663.9c-1.5-3.1-5-8-7.8-11.6l2.6-1.5c2.9,3.5,6.4,8.4,8,11.4L680.6,663.9z"></path>
<path d="M708.9,656.4c-1.1,7.1-3.7,14.7-9.5,21c-0.5-0.6-1.5-1.6-2.1-2.1c5.3-5.8,7.8-12.6,8.9-18.9h-7.3v-19.3h7.2
c0.7-1.7,1.4-3.9,1.8-5.5l3.2,0.5c-0.6,1.7-1.2,3.5-1.9,5h9.4v19.3H708.9z M701.6,645.5h5.5v-1.4v-4.2h-5.5V645.5z M706.5,653.6
c0.2-2,0.4-3.9,0.5-5.7h-5.4v5.7H706.5z M735.9,673.8c3.5,0,4-0.7,4.4-4.4c0.8,0.5,2,0.9,2.9,1c-0.5,4.9-1.7,6.1-7.1,6.1h-18.2
c-7.1,0-9-0.9-9-5.1v-13.2h2.9v13.2c0,1.9,0.9,2.4,5.9,2.4H735.9z M715.7,648h-6c-0.1,1.8-0.2,3.7-0.4,5.7h6.3V648z M715.7,639.9
h-5.9v4.2v1.4h5.9V639.9z M718.3,665.7c-0.3-1-0.8-2.2-1.2-3.1l1.8-0.5c1.1,2.2,2.2,5,2.5,6.7l-1.8,0.8c-0.1-0.6-0.3-1.3-0.5-2.1
c-4.8,0.8-5.8,1-6.3,1.2c-0.2-0.5-0.5-1.7-0.8-2.3c0.5-0.1,0.8-0.7,1.2-1.5c0.4-0.8,1.8-4.2,2.3-7.2l2.3,0.6
c-0.7,2.8-1.8,5.6-2.9,7.7L718.3,665.7z M729.7,653.7c-2,4.8-4.9,9.8-7.9,12.6c-0.2-0.8-1-2.2-1.5-2.9c2.8-2.5,5.9-7.4,7.6-11.9
h-7.7v-3h9.4V642h-7.9v-2.9h7.9v-6.8h3v6.8h8.1v2.9h-8.1v6.5h9.4v3h-7.8c2.1,4.7,5.5,9.6,8.7,12.1c-0.8,0.5-1.7,1.6-2.3,2.4
c-2.8-2.8-5.9-7.6-8-12.4v16.5h-3V653.7z"></path>
<path d="M790.2,642.8c0,0,0,1.3-0.1,1.8c-1.2,20.8-2.2,28.1-4.5,30.6c-1.1,1.4-2.2,1.8-4.1,1.9
c-1.7,0.2-4.8,0-7.9-0.2c-0.1-1-0.5-2.4-1.2-3.3c3.5,0.3,6.7,0.3,7.9,0.3c1.1,0,1.7-0.2,2.3-0.8c1.8-1.8,2.9-8.9,3.9-27h-17.5
c-0.7,10.4-4,22.5-18.6,31.5c-0.5-0.8-1.8-2.1-2.5-2.6c13.8-8.3,17-19.4,17.7-28.9h-16.3v-3.3h16.4c0-0.9,0-1.7,0-2.5v-8.4h3.5
v8.4c0,0.8,0,1.6,0,2.5H790.2z"></path>
<animate attributename="fill" begin="0s" dur="1s" from="#EAA8A2" to="#fff" fill="freeze" ></animate>
</g>
<g style="fill:#EAA8A2;">
<path class="st2" d="M549.7,787.7"></path>
<g style="fill:#EAA8A2;">
<path d="M547.8,751.4c-0.5,0-1.1-0.2-1.4-0.7c-3.9-4.8-5.8-10.9-5.2-17.1c0.6-6.2,3.6-11.8,8.4-15.7
s10.9-5.8,17.1-5.2c12.8,1.3,22.1,12.7,20.9,25.5c-0.3,3.3-1.3,6.4-3,9.3c-0.5,0.9-1.7,1.2-2.5,0.7c-0.9-0.5-1.2-1.7-0.7-2.5
c1.4-2.4,2.2-5,2.5-7.8c1.1-10.7-6.8-20.3-17.5-21.4c-5.2-0.5-10.3,1-14.3,4.3c-4,3.3-6.5,8-7.1,13.2c-0.5,5.2,1,10.3,4.3,14.3
c0.7,0.8,0.5,2-0.3,2.6C548.6,751.2,548.2,751.4,547.8,751.4z"></path>
<animate attributename="fill" begin="0s" dur="1s" from="#EAA8A2" to="#fff" fill="freeze" ></animate>
</g>
<path d="M597.2,766.1L597.2,766.1c-0.9,0-1.7,0.2-2.5,0.5c-1.3-3.1-4.1-5.1-7.2-5.2c-1.5,0-3,0.5-4.3,1.5
c-2-3-5.7-4.2-8.9-2.9v-11.4c0.1-5.5-3.9-10-8.9-10.1c-5,0.1-8.9,4.6-8.9,10.1v34.2c-3-1.8-6.7-1.6-9.6,0.4
c-4.2,3.1-5.3,9.4-2.5,14.1l12.2,20.2l0.3,0.4l0.2,0.3c0.1,0.2,0.2,0.3,0.4,0.5c1.7,3,3.9,6.8,8.6,6.8h26.2
c2.5-0.3,4.8-1.6,6.4-3.7c4-4.7,6.3-10.9,6.4-17.3v-28.1C605.4,771,601.9,766.6,597.2,766.1z M601.6,804.3
c0,8.5-5.9,16.8-9.4,16.8H566c-2.6,0-3.7-1.8-5.5-4.9l-0.2-0.3v-0.2l-0.4-0.5l-12.5-20.4c-1.7-2.7-1-6.4,1.5-8.2
c0.9-0.7,2-1,3.1-1c1.9,0,3.6,1,4.6,2.7l3.6,5.9v-45.7c-0.1-3.1,2.1-5.7,5-5.9l0.1,0l0.1,0c2.9,0.2,5.1,2.8,5,5.9l0,26.8l0.2,0.2
h2.3l0.1-0.1v-8.9l0.1-0.2c0.7-1.5,2-2.6,3.6-2.7l0.1,0l0.1,0c2.2,0.3,4,2.2,4.3,4.5l0.2,1.1v8.6l0.1,0.1h2.3l0.1-0.1v-10.1
l0.2-0.3c0.7-1.1,1.9-1.8,3.1-1.9l0.2,0l0.1,0c2.5,0.4,4.3,2.8,4.2,5.5l0.2,2.3l0,8.1l0.1,0.1h2.3l0.1-0.1v-10.1l0.5-0.4
c0.6-0.4,1.3-0.7,2-0.7c2.4,0,4.5,2.7,4.5,6V804.3z"></path>
<animate attributename="fill" begin="0s" dur="1s" from="#EAA8A2" to="#fff" fill="freeze" ></animate>
</g> -->
</g>
<animate id="op1" attributename="opacity" from="1" to="0" fill="freeze" begin="click" dur="2s"></animate>
<animateMotion path="M-600 -1000" begin="circle.click+2s" dur="0.1s" fill="freeze"></animateMotion>
<!-- <animateMotion path="M-600 -1000" begin="op1.end" dur="0.1s" fill="freeze"></animateMotion> -->
<!-- <animateMotion path="M-600 -1000" begin="2s" dur="0.1s" fill="freeze"></animateMotion> -->
</g>
<animate id="op1" attributename="opacity" from="1" to="0" fill="freeze" begin="click" dur="2s"></animate> <animateMotion path="M-600 -1000" begin="circle.click+2s" dur="0.1s" fill="freeze"></animateMotion> <!-- <animateMotion path="M-600 -1000" begin="op1.end" dur="0.1s" fill="freeze"></animateMotion> --> <!-- <animateMotion path="M-600 -1000" begin="2s" dur="0.1s" fill="freeze"></animateMotion> -->
注意动画对应的时间是不同的
begin="2s" 是指开始后2s
begin="op1.end" 与
begin="circle.click+2s" 都是指点击后2s
以上是关于微信公众号图文 点击显示图片效果的主要内容，如果未能解决你的问题，请参考以下文章