请问SVG 技术中的点击弹出图片是怎么弄的呀？

以下内容来自我司前端开发工程师：

SVG弹出图片的效果，其实有两种方式：

一种 通过SVG的动画效果 去实现，另一种是借用 微信自带的图片预览功能 去实现。

这里我们主要介绍SVG的实现方式：

对于SVG的动画效果实现，主要是通过属性变化来实现，目前用的比较多的 是透明度（opacity）、可见属性（visibility）、和平移（transform： translateX） 这三种。

其中透明度和可见比较好理解，就是将要弹出的图片放在指定的位置，通过opacity为0或者visibility为hidden来隐藏起来，然后在同样的位置放置一个能监听到点击事件;同样透明的rect（svg的矩形元素），当用户点击相应区域，从而触发点击，然后再通过begin属性设为click或者touch相关事件动画元素<animation/>将透明度过渡到1或者可见属性变为visible来实现弹出图片效果。

另一个是平移属性，它是先将图片移出到屏幕外，transform: translateX(10000), 然后还是同样的手段在点击之后将translateX值过渡到0，只是动画元素只能用CSS3的<animateTransform/>来实现一个平移过渡。

下面是两个实现效果的参考公众号案例链接：