微信公众号 SVG长按互动

Posted 2020-11-16 哈哈敲敲

<section class=""
        style="display: block;width: 100%;height:667px;overflow:hidden;margin-top: -1px;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;
        background-image: url(‘http://test.houjt.cn/userproject/cjytest/svg/img/10-23/1.gif‘);
        -webkit-tap-highlight-color: transparent;user-select: none;">
        <svg enable-background="new 0 0 750 1334" space="preserve"
            style="display: block;width: 100%;height:667px;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;
            background-image: url(‘http://test.houjt.cn/userproject/cjytest/svg/img/10-23/1.jpg‘);
            -webkit-tap-highlight-color: transparent;"
            version="1.1" viewBox="0 0 750 1334" x="0px" xlink="http://www.w3.org/1999/xlink" xml=""
            xmlns="http://www.w3.org/2000/svg" y="0px">
            <animate attributeName="opacity" values="1;1;0" begin="touchstart" end="touchend" dur="1.5s"
            keyTimes="0;.3;1" fill="freeze" restart="whenNotActive"></animate>
            <animate attributeName="opacity" begin="touchend" to="1" dur="1.5s" fill="freeze" restart="whenNotActive"></animate>
        </svg>
    </section>

把代码复制到135编辑器可以手机扫描生成的预览二维码码查看实际效果。

P.S. 预览二维码要内容里有文字才能生成，单纯放svg标签而没有文字内容，135编辑器是生成不了预览二维码的，如果生成不了码，就在上面随便打几个字在试试

 

参考链接：

详细教你微信公众号正文页SVG交互开发