模板效果

点击查看效果

模板代码

<section style="display: block; overflow: hidden; width: 350px;margin: 0 auto;background-color: #fff;font-size: 0px;pointer-events: none;">
    <!-- 红包口令 -->
    <section style="display: block;width:335px;height:0;margin-left: auto;margin-right: auto;font-size:0px;">
        <svg viewbox="0 0 335 594" style="margin-top:0px;display: inline-block;width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;pointer-events:none;" data-author="视频号·懂点君">
            <g>
                <foreignobject x="0" y="0" width="335" height="594">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEyESiayBuVJDQ8rduC6gsrAtRs6jnZmd31lkWzOiaaaQO1e7cMEiaT4YlYQ/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 335 594" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
        </svg>
    </section>
    <!-- 聊天窗口 -->
    <section style="transform:scale(1);pointer-events:none;font-size:0px;width:100%;display: block;margin-left: auto;margin-right: auto;">
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:0px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet">
            <g data-author="视频号·懂点君">
                <foreignobject x="-6" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
                <animatetransform attributename="transform" type="translate" values="90000" fill="freeze" begin="click+0.8" dur="900s"></animatetransform>
            </g>
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1"></animate>
            <animate attributename="height" fill="freeze" restart="never" calcmode="spline" keysplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keytimes="0;0.0001;0.0005;1" values="507;0;594;594" dur="5000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-8" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.1"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>            
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-10" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.2"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-12" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.3"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-10" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.4"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-8" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.5"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-6" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.6"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-4" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.7"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="-2" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.8"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="0" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="1.9"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="2" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="4" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2.1"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="6" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2.2"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="8" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2.3"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="10" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2.4"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="12" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2.5"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
        <!-- 相同代码，只需修改坐标 -->
        <svg xmlns="http://www.w3.org/2000/svg" style="pointer-events:painted;margin-top:-483px;width: 100%;margin-left: auto;margin-right: auto;" width="100%" height="0" preserveaspectratio="xMidYMin meet" data-author="视频号·懂点君">
            <g data-author="视频号·懂点君">
                <!-- 点击透明度隐藏 -->
                <animate attributename="opacity" begin="click+0.3" dur="900s" values="0" fill="freeze"></animate>
                <foreignobject x="14" y="0" width="350" height="507">
                    <svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqR4qRzHn0VJhoY7gZqjqsEynnpdMvgL9xMvnXtXy352hoQHJGs3oWhibCco4ZZ57s1JlJVCJajqo9A/0?wx_fmt=jpeg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewbox="0 0 1080 1565" data-author="视频号·懂点君"></svg>
                </foreignobject>
            </g>
            <!-- 默认显示高度 -->
            <animate attributename="height" fill="freeze" values="507" dur="0.0001s" begin="2.6"></animate>
            <!-- 点击隐藏高度 -->
            <animate attributename="height" fill="freeze" values="0" dur="90000s" begin="click+0.3"></animate>
        </svg>
    </section>
</section>

模板应用