SVG在苹果上点击不了

做一个公众号推文,需要用SVG实现一些点击效果,连续点击切换静态的图片然后出现底下的动图。
在PC和安卓下可以实现效果,如下动图:
q2qp4-fobx7.gif

但是在苹果手机上就不行,SVG的点击事件只在第一张有效,切换不到第二张,闪来闪去的效果如下:
5mmhx-r61xe.gif

我想模仿实现的效果:点击查看

上面例子的原理是利用SVG的路径来绘制的,但是我们的设计师不会输出,我也不太懂SVG,所以最后以帧图的形式来实现。

由于对SVG不熟悉,所以不知道为什么同样的代码,在IOS里实现不了跟PC和安卓不一样的效果,哪位大佬知道什么原因吗?
源码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>

<body>
    <section
        style="padding:0;margin:0;background: #e9e0cf;width: 375px;height: 360px;overflow: hidden;background-color:#e9e0cf;background-size: 100%,100%;background-repeat: no-repeat;background-image:url(http://test.houjt.cn/userproject/cjytest/tuiwen/1216/qiemianfen/gif.gif);">

        <svg preserveAspectRatio="xMinYMin meet"
            style="margin-top:-0px;float:left;width: 100%;height:360px;background-color:#e9e0cf;background-size: 100%,100%;background-repeat: no-repeat;background-image:url(http://test.houjt.cn/userproject/cjytest/tuiwen/1216/qiemianfen/5.jpg);"
            version="1.1" viewBox="0 0 340 360" xmlns="http://www.w3.org/2000/svg">
            <animate attributeName="opacity" begin="click" dur="0.1s" values="1;0" fill="freeze" restart="never">
        </animate> 
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.01s" values="0 0;500 0"
                fill="freeze" restart="never"></animateTransform>
        </svg>

        <svg preserveAspectRatio="xMinYMin meet"
            style="margin-top:-360px;float:left;width: 100%;height:360px;background-color:#e9e0cf;background-size: 100%,100%;background-repeat: no-repeat;background-image:url(http://test.houjt.cn/userproject/cjytest/tuiwen/1216/qiemianfen/4.jpg);"
            version="1.1" viewBox="0 0 340 360" xmlns="http://www.w3.org/2000/svg">
            <animate attributeName="opacity" begin="click" dur="0.1s" values="1;0" fill="freeze" restart="never">
        </animate> 
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.01s" values="0 0;500 0"
                fill="freeze" restart="never"></animateTransform>
        </svg>

        <svg preserveAspectRatio="xMinYMin meet"
            style="margin-top:-360px;float:left;width: 100%;height:360px;background-color:#e9e0cf;background-size: 100%,100%;background-repeat: no-repeat;background-image:url(http://test.houjt.cn/userproject/cjytest/tuiwen/1216/qiemianfen/3.jpg);"
            version="1.1" viewBox="0 0 340 360" xmlns="http://www.w3.org/2000/svg">
             <animate attributeName="opacity" begin="click" dur="0.1s" values="1;0" fill="freeze" restart="never">
        </animate>
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.01s" values="0 0;500 0"
                fill="freeze" restart="never"></animateTransform>
        </svg>

        <svg preserveAspectRatio="xMinYMin meet"
            style="margin-top:-360px;float:left;width: 100%;height:360px;background-color:#e9e0cf;background-size: 100%,100%;background-repeat: no-repeat;background-image:url(http://test.houjt.cn/userproject/cjytest/tuiwen/1216/qiemianfen/2.jpg);"
            version="1.1" viewBox="0 0 340 360" xmlns="http://www.w3.org/2000/svg">
             <animate attributeName="opacity" begin="click" dur="0.1s" values="1;0" fill="freeze" restart="never">
        </animate> 
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.01s" values="0 0;500 0"
                fill="freeze" restart="never"></animateTransform>
        </svg>

        <svg preserveAspectRatio="xMinYMin meet"
            style="margin-top:-360px;float:left;width: 100%;height:360px;background-color:#e9e0cf;background-size: 100%,100%;background-repeat: no-repeat;background-image:url(http://test.houjt.cn/userproject/cjytest/tuiwen/1216/qiemianfen/1.jpg);"
            version="1.1" viewBox="0 0 340 360" xmlns="http://www.w3.org/2000/svg">
            <animate attributeName="opacity" begin="click" dur="0.1s" values="1;0" fill="freeze" restart="never">
        </animate> 
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.01s" values="0 0;500 0"
                fill="freeze" restart="never"></animateTransform>
        </svg>
    </section>
</body>

</html>
阅读 877
评论
    2 个回答

    我找到解决方法了,就是把动画属性改成width值为0,这样上面那层svg就不见了,我之前用的动画是opacity和transform,貌似是SVG的animateTransform在苹果那里有点问题?

    <animate attributeName="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin=" click + 0.01s"></animate\>
      • 1.2k

      外面包裹一层 在包裹上做事件监听 先前遇到过类似情况

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章