SVG排版公眾號(hào)文章『兩次互動(dòng)，展開(kāi)長(zhǎng)圖』模板代碼
模板代碼
<section style="overflow: hidden;margin: 0 auto;text-align: center;">
? ? <!-- 長(zhǎng)圖內(nèi)容 -->
? ? <section style="height:0;display: block;margin-left: auto;margin-right: auto;">
? ? ? ? <section style="background-color: rgb(237, 239, 240);">
? ? ? ? ? ? <img src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSOBWg8rFK9p5DK7qcibxdGng3jfozGASibvUP6z1FtMuVgq2lovfVKMUAclBibic0ZWImgWyhutDpI1g/0?wx_fmt=png" style="width: 100%!important; height: auto !important; visibility: visible !important;">
? ? ? ? </section>
? ? </section>
? ? <!-- 動(dòng)畫(huà)區(qū)域 -->
? ? <section style="display: block;pointer-events: none;transform: scale(1);">
? ? ? ? <!-- 第二頁(yè) -->
? ? ? ? <svg style="display: block;width: 100%;transform: scale(1);pointer-events:none;margin-left: auto;margin-right: auto;max-width:none!important;" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1200" xml:space="preserve" >
? ? ? ? ? ? <!-- 展開(kāi)動(dòng)畫(huà) -->
? ? ? ? ? ? <animate attributeName="width" fill="freeze" restart="never" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0;0.0035;1" values="100%;208%;208%" dur="900s" begin="click+1"></animate>
? ? ? ? ? ? <g>
? ? ? ? ? ? ? ? <!-- 第二頁(yè)事件觸發(fā)區(qū)域移出掉,避免重復(fù)點(diǎn)擊 -->
? ? ? ? ? ? ? ? <animateTransform attributeName="transform" type="translate" values="2222 0" fill="freeze" begin="click+1" dur="1s" restart="never"></animateTransform>
? ? ? ? ? ? ? ? <!-- 第二次點(diǎn)擊透明度變化 -->
? ? ? ? ? ? ? ? <foreignObject x="0" y="0" width="100%" height="100%">
? ? ? ? ? ? ? ? ? ? <svg style="display: block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSOBWg8rFK9p5DK7qcibxdGnvIYMP0icBINMVF7fuDWibVZ24jkDe6CBQR9bpcWXYKEdb73WalMSjVdw/0?wx_fmt=png);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 1200"></svg>
? ? ? ? ? ? ? ? </foreignObject>
? ? ? ? ? ? ? ? <rect x="0" y="0" fill="#fff" width="750" height="1200" opacity="0" style="pointer-events:painted;"></rect>
? ? ? ? ? ? ? ? <animate attributeName="opacity" begin="click" dur="1s" values="1;0" fill="freeze" restart="never"></animate>
? ? ? ? ? ? </g>
? ? ? ? </svg>
? ? ? ? <!-- 第一頁(yè) -->
? ? ? ? <svg style="display: block;width: 100%;margin-left: auto;margin-right: auto;margin-top: -148vw;background-position: 0 0;background-repeat: no-repeat;background-size: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSOBWg8rFK9p5DK7qcibxdGnrknejH38ibtTej8dcYibZTia4q56oH6sC1zoHr0sibqibibUymvrt3aQk7KA/0?wx_fmt=png);opacity: 1;pointer-events: none;transform: scale(1);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1200" xml:space="preserve">
? ? ? ? ? ? <!-- 第一次點(diǎn)擊透明度變化 -->
? ? ? ? ? ? <animate attributeName="opacity" begin="click" dur="1s" values="1;0" fill="freeze" restart="never"></animate>
? ? ? ? ? ? <g data-author="我是懂點(diǎn)君，關(guān)注我，從此讓你多懂點(diǎn)，少吃虧！">
? ? ? ? ? ? ? ? <!-- 第一頁(yè)事件觸發(fā)區(qū)域移出掉,讓第二頁(yè)可以接收事件點(diǎn)擊 -->
? ? ? ? ? ? ? ? <animateTransform attributeName="transform" type="translate" values="2222 0" fill="freeze" begin="click+1" dur="1s" restart="never"></animateTransform>
? ? ? ? ? ? ? ? <rect x="0" y="0" fill="#fff" width="750" height="1200" opacity="0" style="pointer-events:painted;"></rect>
? ? ? ? ? ? </g>
? ? ? ? </svg>
? ? </section>
</section>
模板分析
素材準(zhǔn)備：兩張引導(dǎo)圖 + 一張大長(zhǎng)圖；
利用margin-top負(fù)值（案例中設(shè)置margin-top: -148vw;），使兩個(gè)SVG重疊在一起；SVG頂部之間的距離都是負(fù)數(shù)了，而且數(shù)值剛好是SVG的高度，你說(shuō)兩者是不是重合了？
第一次點(diǎn)擊的時(shí)候，需要把第一個(gè)SVG事件觸發(fā)區(qū)域移出可視區(qū)，這樣第二次點(diǎn)擊的時(shí)候，第二個(gè)SVG才可以接收事件觸發(fā)動(dòng)畫(huà)；
展開(kāi)動(dòng)畫(huà)的寬度百分比怎么計(jì)算？當(dāng)width="100%"時(shí)，SVG高度為1200；大長(zhǎng)圖的圖片高度為2500，當(dāng)(2500/1200 * 100) = 208%時(shí)，SVG高度為2500，完全展開(kāi)圖片，也能自適應(yīng)各種屏幕展開(kāi)。
