SVG案例之触摸翻页

案列要点：

1.用户触摸动作触发画面滚动翻页类型满屏H5的效果

技术要点：

1.首先以SVG元素满屏占位，进而通过animate动画属性改变占位元素的高度为0来实现画面从下至上的整屏滚动效果

实现代码：

 <section  data-author='微信公众号：行走SVG' style="line-height: 0; pointer-events: none; overflow: hidden; width: 90vw; margin: 0px auto; height: 172vw; font-size: 0px; visibility: visible;">
        <section style="height: 0px; visibility: visible;">
            <!-- 页面一 -->
            <section>
                <svg style="max-width:none!important;" viewBox="0 0 1000 2000" x="0px" y="0px">
                    <animate attributeName="width" begin="touchstart" calcMode="spline" dur="1000s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.001;1" restart="never" values="100%;0%;0%"></animate>
                    <rect fill="#000000" width='400' height='200' opacity="0"  x='300' y='1700' style="pointer-events:visible;z-index:99" >
                        <animateTransform attributeName="transform" begin="click" calcMode="discrete" dur="1000s" fill="freeze" keyTimes="0;0.000001;1" restart="never" type="translate" values="0 0;-2000 0;-2000 0"></animateTransform>
                    </rect>
                </svg>
                <section style="height:0;transform: rotate(180deg);">
                    <svg style="transform: rotate(180deg);" viewBox="0 0 1000 2000" x="0px" y="0px">
                        <!-- 背景图 -->
                        <g>
                            <animateTransform attributeName="transform" begin="0" dur="2s" fill="freeze" repeatCount="indefinite" type="translate" values="0 0;0 -20;0 0"></animateTransform>
                            <foreignObject style="" x="0" y="0" transform="" width="1000" height="2162">
                                <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkf6LqiaMvibztHbXEbFGTRyegreUMsGJ6j2JYcgTp3Hcicx5Tibr2z6Z3Yg/0?wx_fmt=jpeg);" viewBox="0 0 1000 2162"></svg>
                            </foreignObject>
                        </g>
                        <!-- 文字  -->
                        <g>
                            <foreignObject style="" x="0" y="0" transform="" width="1000" height="2162">
                                <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tko5NIqtvojepicsBu6qniclCz1EnibUWf0Kb0qiaRK08LUkZvh2bUpFBX1w/0?wx_fmt=png);" viewBox="0 0 1000 2162"></svg>
                            </foreignObject>
                        </g>
                        <!-- 滑动提示 -->
                        <g   transform="translate(400,1650)">
                            <g>
                                <animateTransform attributeName="transform" begin="0.2s" dur="1s" fill="freeze" repeatCount="indefinite" type="translate" values="0 0;0 -15;0 0"></animateTransform>

                                <foreignObject style="" x='100' y='140' width="200" height="200" transform="scale(0.5)">
                                    <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkEib4ZnHZlEt6lUs8A0LYibyHia7o6yBgucmBzgan0vNdyh9E4Fo1s0yIQ/0?wx_fmt=png);" viewBox="0 0 200 200"></svg>
                                </foreignObject>
                            </g>
                            <text x='100' y='180' fill=' #fff' style='font-size: 20px;color: #fff;text-align: center;text-anchor: middle;letter-spacing: 4px;'>触摸翻页</text>
                        </g>
                    </svg>
                </section>
            </section>
            <!-- 页面二 -->
            <section>
                <svg style="max-width:none!important;" viewBox="0 0 1000 2000" x="0px" y="0px">
                    <animate attributeName="width" begin="touchstart" calcMode="spline" dur="1000s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.001;1" restart="never" values="100%;0%;0%"></animate>
                    <rect fill="#000000"  width='400' height='200' opacity="0"  x='300' y='1700' style="pointer-events:visible;z-index:99" >
                        <animateTransform attributeName="transform" begin="click" calcMode="discrete" dur="1000s" fill="freeze" keyTimes="0;0.000001;1" restart="never" type="translate" values="0 0;-2000 0;-2000 0"></animateTransform>
                    </rect>
                </svg>
                <section style="height:0;transform: rotate(180deg);">
                    <svg style="transform: rotate(180deg);" viewBox="0 0 1000 2000" x="0px" y="0px">
                        <!-- 背景图 -->
                        <g>
                            <animateTransform attributeName="transform" begin="0" dur="2s" fill="freeze" repeatCount="indefinite" type="translate" values="0 0;0 -20;0 0"></animateTransform>
                            <foreignObject style="" x="0" y="0" transform="" width="1000" height="2162">
                                <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkqX5mu47czpcmKDRDly4r2galZ8XxwbXS7JbMM8icMVuxSRlaXGmhodQ/0?wx_fmt=jpeg);" viewBox="0 0 1000 2162"></svg>
                            </foreignObject>
                        </g>
                        <!-- 文字  -->
                        <g>
                            <foreignObject style="" x="0" y="0" transform="" width="1000" height="2162">
                                <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkqe95BCm14BlrkCHo8eVMjZico3nkSE1HePhxIhBd3aAJeCr5RGHMOcQ/0?wx_fmt=png);" viewBox="0 0 1000 2162"></svg>
                            </foreignObject>
                        </g>

                        <!-- 滑动提示 -->
                        <g   transform="translate(400,1650)">
                            <g>
                                <animateTransform attributeName="transform" begin="0.2s" dur="1s" fill="freeze" repeatCount="indefinite" type="translate" values="0 0;0 -15;0 0"></animateTransform>

                                <foreignObject style="" x='100' y='140' width="200" height="200" transform="scale(0.5)">
                                    <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkEib4ZnHZlEt6lUs8A0LYibyHia7o6yBgucmBzgan0vNdyh9E4Fo1s0yIQ/0?wx_fmt=png);" viewBox="0 0 200 200"></svg>
                                </foreignObject>
                            </g>
                            <text x='100' y='180' fill=' #fff' style='font-size: 20px;color: #fff;text-align: center;text-anchor: middle;letter-spacing: 4px;'>触摸翻页</text>
                        </g>
                    </svg>
                </section>
            </section>
            <!-- 页面三 -->
            <section>
                <svg style="max-width:none!important;" viewBox="0 0 1000 2000" x="0px" y="0px">
                </svg>
                <section style="height:0;transform: rotate(180deg);">
                    <svg style="transform: rotate(180deg);" viewBox="0 0 1000 2000" x="0px" y="0px">
                        <!-- 背景图 -->
                        <g>
                            <animateTransform attributeName="transform" begin="0" dur="2s" fill="freeze" repeatCount="indefinite" type="translate" values="0 0;0 -20;0 0"></animateTransform>
                            <foreignObject style="" x="0" y="0" transform="" width="1000" height="2162">
                                <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkOys6kR4AmCNhIb74pmVtDtprVHugIUBFialPjRibsRAKWCgkkppCg7bg/0?wx_fmt=jpeg);" viewBox="0 0 1000 2162"></svg>
                            </foreignObject>
                        </g>
                        <!-- 文字  -->
                        <g>
                            <foreignObject style="" x="0" y="0" transform="" width="1000" height="2162">
                                <svg style="display: inline-block;width: 100%;background-size:100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/ibUIUzcDBvb24icwn9ry4hpovo6csk31tkkmVuaF6m7eGKjU4LXhWQoVB8Pq9A7nj36kvvDiaDxqJmUMiaz0UIZibCA/0?wx_fmt=png);" viewBox="0 0 1000 2162"></svg>
                            </foreignObject>
                        </g>
                    </svg>
                </section>
            </section>
        </section>
    </section>

- THE END -