视频中的SVG模板代码：

<section style="display: block; overflow: hidden; background-color: #fff;font-size: 0px;pointer-events: none;">
    <section style="display: block;margin: 0px auto;text-align: center;">
        <section style="height:0;display: block;margin-left: auto;margin-right: auto;">
            <!-------------------------------- 最后显示的长图 -------------------------------->
            <section style="height:0;">
                <p>
                    <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNcmPqVKnyygl2F27bF1jEyAbpb7o66Fa1VZhxhVsygKlF0SgR8Lhbuw/0?wx_fmt=png">
                </p>
            </section>
            <!-------------------------------- 控制图片切换 -------------------------------->
            <svg viewBox="0 0 750 880" style="display: inline-block;pointer-events:none;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
                <g>
                    <g>
                        <!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
                        <set attributeName="visibility" from="visible" to="hidden" begin="7.6"></set>
                        <foreignObject x="0" y="0" width="750" height="880">
                            <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNBucaSiaKwd8Sms3mDWZV56JtUdl1VDwUNibZ9jhVwZyOLjB0QbuSx0fg/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
                        </foreignObject>
                    </g>
                    <g>
                        <!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
                        <set attributeName="visibility" from="visible" to="hidden" begin="5.4"></set>
                        <foreignObject x="0" y="0" width="750" height="880">
                            <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNSEubw20iaBricb3LjG1Sx66BoSPh5wE3ltxvLSO33g1PdckSXwBGjQbA/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
                        </foreignObject>
                    </g>
                    <g>
                        <!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
                        <set attributeName="visibility" from="visible" to="hidden" begin="3.4"></set>
                        <foreignObject x="0" y="0" width="750" height="880">
                            <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNzicfDAWWOyhGtzxy667u58rWgCia5y1PLUAyT9ia4AWuD8N74gT708wcA/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
                        </foreignObject>
                    </g>
                    <g>
                        <!-- set：元素可以用来设定一个属性值，并为该值赋予一个开始时间。 -->
                        <set attributeName="visibility" from="visible" to="hidden" begin="1.4"></set>
                        <foreignObject x="0" y="0" width="750" height="880">
                            <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0 0;background-repeat: no-repeat;background-size:100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQSyoPnDG2jIxaRTYueo0VNV2z23W31a0gCicZVRW7M5ArRiaaosQT1Pelae5ZznI1otgDzwf7jk8iaA/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 880"></svg>
                        </foreignObject>
                    </g>
                </g>
            </svg>
        </section>
        <!-------------------------------- 控制高度变化的动画 -------------------------------->
        <section style="display: block;margin: 0 auto;pointer-events:none;vertical-align:top;text-align: center;">
            <svg viewBox="0 0 750 880" style="pointer-events:none;max-width:none!important;">
                <!-- calcMode：该属性指定动画的插值模式。默认的模式是线性的。 -->
                <!-- spline —— 插值根据三次贝塞尔样条曲线定义的时间函数从values列表中的一个值插入到下一个值 -->
                <animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.75;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;100%" dur="0.55s" begin="1"></animate>
                <!-- fill：属性fill="freeze"时，动画终止时，发生变化的元素属性值停留在动画终止时的状态。 -->
                <animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.75;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;100%" dur="0.55s" begin="3"></animate>
                <!-- keySplines：定义了一个与keyTimes列表相关的一组贝塞尔控制点，定义了一个控制间隔速率的三次贝塞尔函数。 -->
                <animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.75;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;100%" dur="0.55s" begin="5"></animate>
                <!-- begin：这个属性定义了动画何时开始 -->
                <animate attributeName="width" fill="freeze" restart="never" keyTimes="0;.2;1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" values="100%;3%;490%" dur="3.5s" begin="7"></animate>
            </svg>
        </section>
    </section>
</section>