场景：在微信推文中，用户点击图片

效果： 用户点击后，展示图片，有点像拉开一个长轴画卷的感觉

视频加载中...

如何实现呢？几天抽空就研究了一下，同大家共享；

首先看一下这个原理图，下面有相关的描述信息

第一步：建立三个 section 层级关系如原理说明图；

技术要点：

A： 在section 1 中包含两个 section 2 和 section 3（同用户交互使用）

B：section 1 的高度不要设置，由SVG图片1自动撑开，并设置超过高度隐藏这个很重要；

第二步：将section 2的高度设置为0，这个是关键，表示在section 2中的SVG图片不显示出来；高度为0，并且外围的section 1设置了超过隐藏；这些图片没地方显示了，于是看起来就隐藏起来了。

技术要点：

A：section 2 中的第一张图片（图片2）可以设置成图片（图片3）的高度；

图片2（height） = 图片3（height）

B： 图片2会一直被 图片3遮挡住，相当于图片2其实就是一个占位置而已；

第三步：section 3，建立一张SVG交互图片

采用SVG的animate 的 begin =“click” 触发 SVG动画，让section 3 内的SVG高度逐渐增加；（具体看下面代码和下图说明

示例代码：

<!--高度由第section撑开,超过高度的都隐藏起来--><section style="width:345px;display: block;margin: 0px auto;text-align:center;overflow:hidden">    <!--top 没有设置高度,以图片高度自动撑开-->    <section style="margin-bottom:-6px;">        <svg class="p1"             version="1.1"             viewBox="0 0 1080 2575" x="0px" y="0px"            xlink="; xmlns="; ></svg>    </section>    <!--隐藏的内容: 设置高度0,里面的图片直接隐藏起来-->    <section style="height:0px;width:345px;display:block;margin-left:auto;margin-right:auto;">        <!--p2的高度应该同btn高度将被btn覆盖其实没有用-->        <section style="margin-bottom:-6px;">            <svg class="p2"             version="1.1"             viewBox="0 0 1080 1568" x="0px" y="0px"            xlink="; xmlns="; ></svg>        </section>        <!--显示出来的第一图片-->        <section style="margin-bottom:-1px;">            <svg class="p3"             version="1.1"             viewBox="0 0 1080 1689.12" x="0px" y="0px"            xlink="; xmlns="; ></svg>        </section>        <!--显示出来的第二张图片-->         <section style="margin-bottom:-1px;">            <svg class="p4"             version="1.1"             viewBox="0 0 1080 771" x="0px" y="0px"            xlink="; xmlns="; ></svg>        </section>    </section>    <!--btn 默认高度534,点击后svg高度变大，从透明变成不透明 -->    <section style="width:345px;display:block;margin-bottom:-40px;text-align: center;margin-left: auto;margin-right: auto;">        <section class="btn">            <svg height="533px" width="345px" opacity="0" preserveAspectRatio="xMidYMin meet" class="btnsvg">    <animate attributeName="height" fill="freeze" restart="never" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0;0.0025;1" values="533;6830;6830" dur="3000s" begin="click+0.8s"></animate>    <animate attributeName="opacity" begin="click" restart="never" dur="1000s" keyTimes="0;0.00000000001;1" values="0;1;1" fill="freeze"></animate>            </svg>        </section>    </section></section>

问题：

问题1： 点击后图片3为何没有被图片挤压到最后面去呢？论顺序图片3这个SVG图片应该在图片2这个SVG后面的啊？是不是很奇怪呢？

解答：section2没有高度，层级上就在 section3的下面了，于是不会把section2的显示；整个section1的高度被撑开后，section2没有被section3遮挡部分就显示出来了；

问题2：从透明变成不透明为何不遮挡section2中的SVG能？

解答：透明度仅仅作用在SVG的有图片区域，section3高度变大，非图片区域还是透明；