技術標籤：svg公眾號文章排版新媒體微信文章

模板效果

SVG排版公眾號文章“迴圈彈性輪播大圖”模版程式碼

模板程式碼

<section style="display: block; overflow: hidden; background-color: #fff;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1500" style="display: block; margin: 0 auto;" width="100%">
            <g>
                <foreignObject x="0" y="0" width="1080" height="1500">
                    <svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hPvlrrQlWLpH4EOp5eKgJfeul4DRAgnvsruhoKiaiaBJzf8jUQESjtkdA/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
            </g>
            <!-- 第四張 -->
            <g>
                <foreignObject x="0" y="0" width="1080" height="1500">
                    <svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hx3RzfxPKicszFP9wHJ8W9YpZLcaChcdWXNUbVqvnuibcW22reNQFhvKw/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <!-- 動畫 -->
                <animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; -80 0; 1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>
            </g>
            <!-- 第三張 -->
            <g>
                <foreignObject x="0" y="0" width="1080" height="1500">
                    <svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hvXUjCN263aM0kibACPE6AkXhspM3dINzs11pz1OBEN6bO2GSktE0aWw/0?wx_fmt=png); background-color: #000; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <!-- 動畫 -->
                <animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; 0 0; 0 0; 80 0; -1081 0; -1081 0; -1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>
            </g>
            <!-- 第二張 -->
            <g>
                <foreignObject x="0" y="0" width="1080" height="1500">
                    <svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hB1jtWiaoaGgG7FxcxTfKW3VcKUaa17Xzk35cRCnYib3sXKuXIDsfEBFw/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <!-- 動畫 -->
                <animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; -80 0; 1081 0; 1081 0; 1081 0; 1081 0; 1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>
            </g>
            <!-- 第一張 -->
            <g>
                <foreignObject x="0" y="0" width="1080" height="1500">
                    <svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hPvlrrQlWLpH4EOp5eKgJfeul4DRAgnvsruhoKiaiaBJzf8jUQESjtkdA/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <!-- 動畫 -->
                <animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 80 0; -1081 0; -1081 0; -1081 0; -1081 0; -1081 0; -1081 0; -1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>
            </g>
        </svg>
    </section>