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

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移动位置，使点击操作只执行一次。

<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

原文地址：https://www.cnblogs.com/echolife/p/10552889.html

时间： 2024-10-06 18:17:38

微信公众号图文点击显示图片效果的相关文章

做微信公众号时，移动端滑动效果（swiper插件（display：none））显示滑动问题

微信公众号的制作,其中缺少不了希望实现标题.内容.图片的滑动效果, 这时候可以选择使用(swiper插件)实现相应效果,功能十分强大,链接:http://www.swiper.com.cn/: 最近做一款公众号时,在实现功能时遇到一难点,废了九牛二虎之力,终于在一高人的帮助下解决了. 1.问题描述: 原本该滑动项是隐藏的(display:none;),滑动项的代码是参考swiper插件文档内容而写, 通过按钮点击之后该滑动项显示(dispay:block),再进行左右滑动效果时,始终显示swip

微信商城开发系列第四篇不写代码玩转微信公众号

本系列文章属作者原创文章,请尊重作者的劳动成果,转载请注明出处:walkingmanc的专栏 , 谢谢! 同时欢迎大家加入微信商城开发QQ群:364072602,共同探讨进步. 为什么叫不写代码玩转微信公众号呢? 我们大家都知道,微信公众号有两种模式,一种是编辑模式,一种是开发模式.所谓的不写代码玩转微信公众号,其实就是在编辑模式下如何使用微信公众号的意思,呵呵,是不是有种恍然大悟的感觉. 其实,如果你关注的微信公众号比较多的话,你会发现有很多有名的公众号,它们没有菜单,每天都会发布4到5篇文

微信公众号开发之网页授权登录及code been used 解决！

首先微信公众号开发网页授权登录使用环境: 开发工具:eclipse:服务器:tomcat8,开发语言:JAVA. 我写的网页授权登录时用开发者模式自定义view类型按钮点击跳转链接的. 微信网页授权登录首先以官方微信开发文档为准,大体共分为4步: 先说第一步获取code: code说明:code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5扽这未被使用自动过期. 微信公众开发文档给的有获取code的链接,建议直接复制来用,然后替换其中相应的参

图书馆申请微信公众号步骤（三证合一后申请微信公众号）

现在微信公众号已经逐渐成为部门宣传.服务的重要力量,因部门需要,我现在将我申请微信公众号(服务号)的过程跟大家分享一下,希望有需要的人看到能够少走弯路.其实,申请微信公众号很简单,1.要注册一个邮箱,可以是qq邮箱或者是网易邮箱等.2.进入微信公众平台https://mp.weixin.qq.com/.3.页面的右上角有一个立即注册.4.选择需要的微信公众号的类型.分为订阅号.服务号.跟企业号,具体的分类方法与功能各位可以自己网上查一下,我在这里就不多说了.PS:我们需要的是服务号,我就在这里说

兴趣部落打通微信公众号，两大平台联手优化兴趣社交体验

手Q兴趣部落推出有一段时间了,这项被视为手Q提升用户粘度,强化移动社交属性的策略被证明是明智之举,如今,在手Q 5.42亿月活跃用户的支持下,兴趣部落的人气也扶摇直上,上线短短一年时间来便涌现出许多百万.千万级部落,不仅为手Q的用户提供了海量的优质内容,更重要的是,它标志着基于手Q平台推进泛社交战略的成功. 兴趣部落的成功也让业界开始将其与微信公众号进行对比,因为兴趣部落中的兴趣号与微信公众号有异曲同工之妙,最初业界认为这是手Q和微信在进行暗战.不过,最近手Q兴趣部落已经开始和微信公众号打通,说

微信公众号跳转到小程序

微信公众号,点击菜单,跳转到小程序官网链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141013 参数说明: { "type":"miniprogram", "name":"点我啊", "url":"http://mp.weixin.qq.com", "appid":"x

第三方网站不能调用微信公众平台里的图片了显示"此图片来自微信公众号平台未经允许不可引用"

下午ytkah在自己小博客搜索时看到有几篇文章图片显示不了,再访问一些网站时发现有些图片无法显示出来,显示"此图片来自微信公众号平台未经允许不可引用",如下图所示,这个应该是最近微信团队对有原创保护能力的公众帐号又一举措. 是不是有点似曾相识?没错,第三方网站调用QQ空间里面的图片也是不能完整显示,提示“此图片来自QQ空间,未经允许不可引用”. 其实,腾讯这些措施应该也是无赖之举,微信公众平台已有近800万公众号入驻了,很多公众号的单篇图文消息都超过了10+阅读量,可以想象整个公众平台

微信公众号获取的图片不能正常显示的问题

目前已经获取微信公众号发布的图片,但不能正常显示提示:此图片来自微信公众平台未经允许不得引用查看了一下他的地址是这样的:(http://mmbiz.qpic.cn/mmbiz/qqz4WKmibGPptReVk5OPKp0hfPYx2s4BGDZZZHyOBs2drnsxxdYwdm99KykNKf8WddhFA0ObjO04VSyocrNKvww/640?tp=webp&wxfrom=5) http://mmbiz.qpic.cn/mmbiz/qqz4WKmibGPptReVk5OPKp0

iframe显示微信公众号文章

最近在做一个案例页面,主要结构就是列表和内容,还有固定的头部和底部(方便查看价格及购买),因为之前的案例详情页是很多的固定页面,这样不太方便维护,现在其他同事需要展示不同的案例,所以就从新整理了一下这块: 1.列表页就是很普通的,请求数据,包含一张图片.一句简要说明.一个微信文章链接,图片和文字展示在列表页,链接是当点击图片是跳转(就是div显示隐藏)显示对应的文章: 2.详情页就是将点击的链接赋值给iframe的src,但是这里问题还是比较多的: 微信公众号文章的图片做了处理,在外域使用的话,

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

微信公众号图文 点击显示图片效果的相关文章

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

微信公众号图文点击显示图片效果的相关文章