微信推文排版：SVG点击展开原理说明

内容分享3周前发布一棵深山里包治百病的板蓝根

1 1 0

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

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

00:00

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

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

微信推文排版：SVG点击展开原理说明

第一步：建立三个 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="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" ></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="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" ></svg>
        </section>
        <!--显示出来的第一图片-->
        <section style="margin-bottom:-1px;">
            <svg class="p3" 
            version="1.1" 
            viewBox="0 0 1080 1689.12" x="0px" y="0px"
            xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" ></svg>
        </section>
        <!--显示出来的第二张图片-->
         <section style="margin-bottom:-1px;">
            <svg class="p4" 
            version="1.1" 
            viewBox="0 0 1080 771" x="0px" y="0px"
            xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" ></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>