SVG在苹果上点击不了
做一个公众号推文，需要用SVG实现一些点击效果，连续点击切换静态的图片然后出现底下的动图。
在PC和安卓下可以实现效果，如下动图：
但是在苹果手机上就不行，SVG的点击事件只在第一张有效，切换不到第二张，闪来闪去的效果如下：
我想模仿实现的效果：点击查看
上面例子的原理是利用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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我找到解决方法了，就是把动画属性改成width值为0，这样上面那层svg就不见了，我之前用的动画是opacity和transform，貌似是SVG的animateTransform在苹果那里有点问题？
外面包裹一层 在包裹上做事件监听 先前遇到过类似情况