使用SVG将图片切割成多个拼图块

一、背景和意义

在前端开发中，有时候需要将某个图标切出一小块特定的形状，或者切成多个小块。其中一个常见的场景就是将一个大图切割成多个拼图块。SVG刚好提供了从一个图片中切出任意区域的方法，本文给出一个使用示例。

二、图片素材与实现效果说明

在这里，我们使用网络上的一个正方形的风景图作为图标素材。 i01piccdn.sogoucdn.com/57d38b7c099...

我们想要将其切割成9个拼图块，效果大体上是这样：

这是其中的左上角的第一个拼图块：

三、代码实现

切出第一个拼图块的示例代码如下：

<svg width="500" height="500" viewBox="0 0 900 900" >
    <defs>
        <clipPath id="clippath">
            <path d="M0 0 L300 0 L300 110 A40 40 180 0 1 300 190 L300 300 L190 300 A40 40 180 0 0 110 300 L0 300 Z" />
        </clipPath>
    </defs>
    <image width="900" xlink:href="https://i01piccdn.sogoucdn.com/57d38b7c09933778"
        style="clip-path:url(#clippath)"/>
</svg>

运行结果就是展示上图的左上角边的一个拼图块。其他拼图块的切割方法类似，这里不再赘述。

四、代码解读

先看代码：

<svg width="500" height="500" viewBox="0 0 900 900" >

这里表示图片的实际大小为500，但是绘制的时候，是以900长900宽作为基准，绘制完之后缩放到500的大小。图片切分时，横向和纵向都是切分成3等分，所以取900作为基准长度会比较好计算。这里如果需要根据不同的场景调整图片的大小时，只需要修改width和height的值就行了。

svg中有这样一段代码：

<image width="900" xlink:href="https://i01piccdn.sogoucdn.com/57d38b7c09933778"
        style="clip-path:url(#clippath)" />

这一段代码表示在svg中引用https://i01piccdn.sogoucdn.com/57d38b7c09933778这个网络图片，后面的clip-path:url(#clippath)表示在图片中切出一小块，这一小块的形状是前面定义的id为clippath的形状。

接下来再看一下这个id为clippath的形状的代码：

<clipPath id="clippath">
    <path d="M0 0 L300 0 L300 110 A40 40 180 0 1 300 190 L300 300 L190 300 A40 40 180 0 0 110 300 L0 300 Z" />
</clipPath>

path标签创建一个自由形状，d参数表示该形状的路径。

M0 0表示定位到图片中坐标为(0, 0)的位置，即图片左上角：

L300 0表示画一条线到坐标为(300, 0)的位置：

L300 110表示画一条线到坐标为(300, 110)的位置：

A40 40 180 0 1 300 190是一个画圆的操作：

• 前两个参数40表示以40为半径。两个参数相等则表示画正圆，不相等时则是画椭圆。
• 第三个参数表示画180度的弧线，即一个半圆。
• 第四个参数0表示不大于180度，如果要画的弧线大于180度则取1。
• 第五个参数1表示沿着顺时针画圆，如果是逆时针画圆则取0。
• 最后两个参数300和190表示圆弧终点的坐标为(300, 190)。 这段代码画的线如下图所示：

接下来的L300 300表示画一条线到(300, 300)位置：

L190 300表示画一条线到(190, 300)位置：

然后A40 40 180 0 0 110 300再次画一个半圆，不过这次是逆时针，所以第5个参数为0：

L0 300再画一条线到(0, 300)的线：

最后的字母Z表示关闭路径，完成图形绘制，这个操作将会画一条直线到起点：

以上操作即完成一个拼图块的绘制。