SVG互动排版公众号图文 『两次物体移动与展开长图』 模板代码

模板效果

 模板代码

<section style="overflow: hidden;">
    <!-- 长图内容模块 -->
    <section style="height: 0;line-height: 0;font-size: 0;">
        <svg style="display: block;pointer-events: none;vertical-align: top;weixin: dong_dian_jun;" viewBox="0 0 1080 7803">
            <!-- 内容 -->
            <g>
                <!-- 第一张图片 background-image和viewBox需要修改-->
                <g>
                    <foreignObject width="1080" height="2601" x="0" y="0">
                        <svg style="display: block;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4o6EO8uqP9rWfAmZfsSuq8AFxCC4XQTYSJrWHyOSrvSNmfrFbKXIXrXZE5kicokV4j3JUfaX8c0A/0?wx_fmt=png);background-position: 0