在正式学习本篇博客前，先要了解一下什么是 SVG（Scalable Vector Graphics），它是一种矢量图形格式，可以用来在网页上创建可伸缩的图形。

使用 SVG 技术实现反爬虫的方法有以下几种：

阅读本篇博客前，需要提前了解一下如何在 Python 中生成 SVG 图片，这一点可以参考下述博客。

Python 生成 svg 图片，一篇博客带你掌握 Python 与 svg 之间的操作

在编写反爬案例时，可以提前生成一张 SVG 图片，其中包含 0~9 这 10 个数字，然后按照一定间隔进行排序。

图片生成使用的是 svgwrite 模块，然后通过打乱 nums 列表，生成一个新的列表排序，最后进行文字渲染。

上述图片每个数字的间隔是 20 像素，基于该点，整理出一个位置和数字的字典。

位置和数字的对应关系字典：

字典中每个元素的第一项是数字，第二项是对应的索引，如果希望获取数字 2 的索引位置，只需要调用 nums_dict[2] 即可实现。

下面实现 SVG 在网页中的应用，其核心用到的是 CSS 背景偏移。

首先在 span 标签中展示数字 1，基于上述 svg 图片进行实现，数字 1 所在的索引位置是 0，所以代码如下所示。

以下代码使用的是 flask 中的 jija2 模板

HTML 标签位置代码为：

运行代码，在浏览器可以看到一个红色背景的图片，其中显示数字 1。

前文重点就是将 SVG 设置为背景图片，然后使用背景偏移，即 background-position:0 0; 进行图片部分区域展示。

用相同的办法，展示出一个完整的数字来，例如 13579，编写如下代码。

此时可以在网页显示一个标准的数字。（红色背景仅供测试使用）

接下来对渲染逻辑做一下总结。

由于 SVG 中每个数字的间隔是 20px，所以渲染对应数字，只需要用 20px 乘以其索引位置即可，由于是左侧偏移，故还需要用到负号（-），表示左移。

拿到该逻辑之后，就可以在 Flask 后台设置数字，前台进行渲染了，例如随机选一个数字 279387，然后 编写 flask 的后台代码。

首先将数字 279387 转换为列表，然后传递道视图模板中，同时还要传递数字与位置对应关系字典。

模板中使用循环实现即可。