svg点击展开原理

svg点击展开原理

<section  style="line-height: 0;overflow:hidden;">
    <section style="height:0;"><svg style="background-image: url(https://oss.knowway.cn/zhongliangct/hou1.jpg);background-repeat: no-repeat;background-size: 100% 100%;" viewBox="0 0 750 2986"></svg>
    </section>
    <section >
        <svg  style="background-image: url(https://oss.knowway.cn/zhongliangct/hou2.jpg);background-repeat: no-repeat;background-size: 100% 100%;opacity:0" viewBox="0 0 750 86">
              <animate attributeName="width" values="100%;1223%;1223%" keyTimes="0;.001;1" dur="20000s" begin="click" fill="freeze" restart="never"></animate>
        </svg>
    </section>
</section>

就是前面加了一层透明度为0  然后做动画就行了