SVG排版功能：实现了点击图A显示图B，点击关闭按钮图B消失，可以重复如上点击操作。下面分别用安卓手机和苹果手机打开测试如下案例。
SVG排版核心代码
<!-- click动画【弹出】 -->
<animateTransform calcMode="discrete" attributeName="transform" type="translate" values="0 0;-2000 0;-2000 0" dur="1000s" keyTimes="0;0.000001;1" fill="freeze" restart="always" begin="click"></animateTransform>
<animate attributeName="opacity" values="0;1" dur="0.3s" fill="freeze" restart="always" begin="click"></animate>
<!-- touchstart动画【关闭】 -->
<animateTransform calcMode="discrete" attributeName="transform" type="translate" values="-2000 0;0 0;0 0" dur="1000s" keyTimes="0;0.000001;1" fill="freeze" begin="touchstart+0.31s"></animateTransform>
<animate attributeName="opacity" values="1;0" dur="0.3s" fill="freeze" restart="always" begin="touchstart+0.01s"></animate>
第一种情况：点击关闭按钮中间区域
结果：
安卓和苹果手机点击关闭按钮中间的位置，图B正常消失
第二种情况：点击关闭按钮旁边/附近区域
接下来，继续分别使用安卓和苹果手机进行测试点击关闭按钮旁边/附近的地方。
结果：
苹果手机的测试效果，无法关闭图片，会出现闪屏
安卓手机的测试效果，正常关闭图片
在Apple手机上，点击关闭按钮附近的区域，会出现无法正常关闭图B，因为无法触发touchstart事件，就无法执行touchstart事件对应的动画代码，最终就无法正常关闭图B。
但是，为什么会出现闪屏现象呢？当你点击关闭按钮附近区域时，这个SVG交互接收了click事件（有点奇葩），导致每次点击的时候执行了click事件对应的动画代码（该动画执行透明度从0到1，因此会有闪屏的现象），这个是导致无法正常关闭的最终原因。
解决办法（如有更好办法，麻烦留言）：
非常简单的办法，增大关闭按钮的宽度和高度，这样可以避免减少用户点击到按钮旁边/附近的区域，可以点击查看优化后的案例。
相关排版实际案例：九宫格点击可重复弹出和关闭图片
今天分享到这里，晚安！
