如何用JavaScript实现SVG图片长尾词切换效果？

本文共计1056个文字，预计阅读时间需要5分钟。

最近太忙了，自动来到rjxy后，不好意思没时间回事，忙的都没时间更博了。昨天还有个同学跟我说，你好久没更新博客了。嘿嘿，正好12月来了，今天开一篇。最近上课讲到了SV。

最近太忙了，自动来到rjxy后，不晓得怎么回事，忙的都没时间更博了。

昨天还有个同学跟我说，你好久没更新博客了。。

甚为惭愧~~

正好12月来了，今天开一篇。

最近上课讲到了 SVG，不晓得同学们理解到没。 -_-!!!

图片轮播见的太多，今天就用 SVG 写了一个图片轮播，效果如下。

效果要求

点击控制块，图片切换。切换的时候使用圆形做遮罩，由小到大变化。每次切换的时候，圆的位置随机产生。

主要知识点

1. SVG 的裁切（遮罩），clip-path 的运用。

2. SVG 利用 JS 更改层级。因为 SVG 不支持 CSS 的 z-index 更改层级，它永远只会让后面的标签盖住前面的标签。

所以，我就利用 JS 的 appendChild 方法，让每次展示的图片，都移动位置到 SVG 的最后---- 话说我真是聪明。

// 更改当前图片的层级为最顶层，也就是放到 SVG 的最后，它会覆盖前面的图片。