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

一、背景和意义

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

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

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

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

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

三、代码实现

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

html 复制代码
<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>

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

四、代码解读

先看代码:

html 复制代码
<svg width="500" height="500" viewBox="0 0 900 900" >

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

svg中有这样一段代码:

html 复制代码
<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的形状的代码:

html 复制代码
<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表示关闭路径,完成图形绘制,这个操作将会画一条直线到起点:

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

相关推荐
然我7 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing9 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心11 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟11 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟12 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun12 分钟前
Promise 基础使用
前端·javascript·promise
Codebee12 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路15 分钟前
GIS 空间关系:九交模型
前端
xiguolangzi22 分钟前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
用户68238060322524 分钟前
前端会用到的数据结构--堆(HEAP)
前端