搜索

[27439] 2019-12-27_一线大厂在用的反爬虫方法，看我如何破了它！

文档创建者：s7ckTeam
浏览次数：0
最后更新：2025-01-19
2019-12-27_一线大厂在用的反爬虫方法，看我如何破了它！ 一 线 大 厂 在 用 的 反 爬 虫 方 法 ， 看 我 如 何 破 了 它 ！ 原 创   韦 世 东   N i g h t T e a m   2 0 1 9 - 1 2 - 2 7 内 容 选 自 即 将 出 版 即 将 出 版 的 《 P y t h o n 3   反 爬 虫 原 理 与 绕 过 实 战 》 ， 本 次 公 开 书 稿 范 围 为 第   6   章 — — 文 本 混 淆 反 爬 虫 。 本 篇 为 第   6   章 中 的 第   3   小 节   S V G   反 爬 虫 反 爬 虫 ， 第   4   小 节 《 字 体 反 爬 虫 》 已 发 布 ， 其 余 小 节 将 逐 步 放 送 逐 步 放 送 。 S V G   映 射 反 爬 虫 映 射 反 爬 虫 S V G   是 用 于 描 述 二 维 矢 量 图 形 的 一 种 图 形 格 式 。 它 基 于   X M L   描 述 图 形 ， 对 图 形 进 行 放 大 或 缩 小 操 作 都 不 会 影 响 图 形 质 量 。 矢 量 图 形 的 这 个 特 点 使 得 它 被 广 泛 应 用 在   W e b   网 站 中 。 接 下 来 我 们 要 了 解 的 反 爬 虫 手 段 正 是 利 用   S V G   实 现 的 ， 这 种 反 爬 虫 手 段 用 矢 量 图 形 代 替 具 体 的 文 字 ， 不 会 影 响 用 户 正 常 阅 读 ， 但 爬 虫 程 序 却 无 法 像 读 取 文 字 那 样 获 得   S V G   图 形 中 的 内 容 。 由 于   S V G   中 的 图 形 代 表 的 也 是 一 个 个 文 字 ， 所 以 在 使 用 时 必 须 在 后 端 或 前 端 将 真 实 的 文 字 与 对 应 的   S V G   图 形 进 行 映 射 和 替 换 ， 这 种 反 爬 虫 手 段 被 称 为   S V G   映 射 反 爬 虫 。 6 . 3 . 1   S V G   映 射 反 爬 虫 绕 过 实 战 映 射 反 爬 虫 绕 过 实 战 示 例   6 ： S V G   映 射 反 爬 虫 示 例 。 网 址 ： h t t p : / / w w w . p o r t e r s . v i p / c o n f u s i o n / f o o d . h t m l 。 任 务 ： 爬 取 美 食 商 家 评 价 网 站 页 面 中 的 商 家 联 系 电 话 、 店 铺 地 址 和 评 分 数 据 ， 页 面 内 容 如 图   6 - 1 5   所 示 。 图   6 - 1 5   示 例   6   页 面 在 编 写   P y t h o n   代 码 之 前 ， 我 们 需 要 确 定 目 标 数 据 的 元 素 定 位 。 在 定 位 过 程 中 ， 发 现 一 个 与 以 往 不 同 的 现 象 ： 有 些 数 字 在   H T M L 代 码 中 并 不 存 在 。 例 如 口 味 的 评 分 数 据 ， 其 元 素 定 位 如 图   6 - 1 6   所 示 。
图   6 - 1 6   评 分 数 据 中 口 味 分 数 元 素 定 位 根 据 页 面 显 示 内 容 ， H T M L   代 码 中 应 该 是   8 . 7   才 对 ， 但 实 际 上 我 们 看 到 的 却 是 ： H T M L   代 码 中 有 数 字   7   和 小 数 点 ， 但 没 有   8   这 个 数 字 ， 似 乎 数 字   8   的 位 置 被   d   标 签 占 据 。 而 商 家 电 话 号 码 处 的 显 示 就 更 奇 怪 了 ， 一 个 数 字 都 没 有 。 商 家 电 话 对 应 的   H T M L   代 码 如 下 ： 包 含 很 多 的   d   标 签 ， 难 道 它 使 用   d   标 签 进 行 占 位 ， 然 后 用 元 素 进 行 覆 盖 吗 ？ 我 们 可 以 将   d   标 签 的 数 量 和 数 字 的 数 量 进 行 对 比 ， 发 现 它 们 的 数 量 是 相 同 的 ， 也 就 是 说 一 对   d   标 签 代 表 一 个 数 字 。 每 一 对   d   标 签 都 有   c l a s s   属 性 ， 有 些   c l a s s   属 性 值 是 相 同 的 ， 有 些 则 不 同 。 我 们 再 将   c l a s s   属 性 值 与 数 字 进 行 对 比 ， 看 一 看 能 否 找 到 规 律 ， 如 图   6 - 1 7   所 示 。 < s p a n   c l a s s = " i t e m " > 口 味 : < d   c l a s s = " v h k j j 4 " > < / d > . 7 < / s p a n > < d i v   c l a s s = " c o l   m o r e " >                   电 话 ：       < d   c l a s s = " v h k b v u " > < / d >         < d   c l a s s = " v h k 0 8 k " > < / d >         < d   c l a s s = " v h k 0 8 k " > < / d >         < d   c l a s s = " " > - < / d >         < d   c l a s s = " v h k 8 4 t " > < / d >         < d   c l a s s = " v h k 6 z l " > < / d >         < d   c l a s s = " v h k q s c " > < / d >         < d   c l a s s = " v h k q s c " > < / d >         < d   c l a s s = " v h k 6 z l " > < / d >   < / d i v >
图   6 - 1 7   c l a s s   属 性 值 和 数 字 的 对 比 从 图   6 - 1 7   中 可 以 看 出 ， c l a s s   属 性 值 和 数 字 是 一 一 对 应 的 ， 如 属 性 值   v h k 0 8 k   与 数 字   0   对 应 。 根 据 这 个 线 索 ， 我 们 可 以 猜 测 每 个 数 字 都 与 一 个 属 性 值 对 应 ， 对 应 关 系 如 图   6 - 1 8   所 示 。 图   6 - 1 8   数 字 与 属 性 值 对 应 关 系 浏 览 器 在 渲 染 页 面 的 时 候 就 会 按 照 这 个 对 应 关 系 进 行 映 射 ， 所 以 页 面 中 显 示 的 是 数 字 ， 而 我 们 在   H T M L   代 码 中 看 到 的 则 是 这 些 c l a s s   属 性 值 。 浏 览 器 在 渲 染 时 将   H T M L   中 的   d   标 签 与 数 字 按 照 此 关 系 进 行 映 射 ， 并 将 映 射 结 果 呈 现 在 页 面 中 。 映 射 逻 辑 如 图 6 - 1 9   所 示 。 图   6 - 1 9   映 射 逻 辑 我 们 的 爬 虫 代 码 可 以 按 照 同 样 的 逻 辑 实 现 映 射 功 能 ， 在 解 析   H T M L   代 码 时 将   d   标 签 的   c l a s s   属 性 值 取 出 来 ， 然 后 进 行 映 射 即 可 得 到 页 面 中 显 示 的 数 字 。 如 何 在 爬 虫 代 码 中 实 现 映 射 关 系 呢 ？ 实 际 上 网 页 中 使 用 的 是 “ 属 性 名 数 字 ” 这 种 结 构 ， P y t h o n   中 内 置 的 字 典 正 好 可 以 满 足 我 们 的 需 求 。 我 们 可 以 用   P y t h o n   代 码 测 试 一 下 ， 代 码 如 下 ： 这 段 代 码 的 逻 辑 是 ： 首 先 定 义 属 性 值 与 数 字 的 映 射 关 系 ， 然 后 假 设 一 个   H T M L   中   d   标 签 的 属 性 值 ， 接 着 将 这 个 属 性 值 的 映 射 结 果 打 印 出 来 。 代 码 运 行 后 得 到 的 结 果 为 ： 运 行 结 果 说 明 映 射 这 种 方 法 是 可 行 的 。 接 着 我 们 试 一 试 将 商 家 的 联 系 电 话 映 射 出 来 ： #   定 义 映 射 关 系 m a p p i n g s   =   { ' v h k 0 8 k ' :   0 ,   ' v h k 6 z l ' :   1 ,   ' v h k 9 o r ' :   2 ,         ' v h k f l n ' :   3 ,   ' v h k b v u ' :   4 ,   ' v h k 8 4 t ' :   5 ,         ' v h k v x d ' :   6 ,   ' v h k q s c ' :   7 ,   ' v h k j j 4 ' :   8 ,         ' v h k 0 f 1 ' :   9 }   #   H T M L   中 得 到 的 属 性 值 h t m l _ d _ c l a s s   =   ' v h k v x d '   #   将 映 射 后 的 结 果 打 印 输 出 p r i n t ( m a p p i n g s . g e t ( h t m l _ d _ c l a s s ) ) 6 #   定 义 映 射 关 系 m a p p i n g s   =   { ' v h k 0 8 k ' :   0 ,   ' v h k 6 z l ' :   1 ,   ' v h k 9 o r ' :   2 ,  
运 行 结 果 为 ： 我 们 使 用 映 射 的 方 法 得 到 了 商 家 联 系 电 话 ， 说 明   S V G   映 射 反 爬 虫 已 经 被 我 们 绕 过 了 。 6 . 3 . 2   大 众 点 评 反 爬 虫 案 例 大 众 点 评 反 爬 虫 案 例 这 种 映 射 手 段 不 仅 仅 出 现 在 本 书 的 示 例 中 ， 在 大 型 网 站 中 也 有 应 用 。 大 众 点 评 是 中 国 领 先 的 本 地 生 活 信 息 及 交 易 平 台 ， 也 是 全 球 最 早 建 立 的 独 立 第 三 方 消 费 点 评 网 站 。 大 众 点 评 不 仅 为 用 户 提 供 商 户 信 息 、 消 费 点 评 及 消 费 优 惠 等 信 息 服 务 ， 同 时 提 供 团 购 、 餐 厅 预 订 、 外 卖 和 电 子 会 员 卡 等   O 2 O （ O n l i n e   T o   O f f l i n e ） 交 易 服 务 。 大 众 点 评 网 站 也 使 用 了 映 射 型 反 爬 虫 手 段 ， 打 开 浏 览 器 并 访 问   h t t p s : / / w w w . d i a n p i n g . c o m / s h o p / 1 4 7 4 1 0 5 7 ， 页 面 如 图   6 - 2 0   所 示 。 m a p p i n g s   =   { ' v h k 0 8 k ' :   0 ,   ' v h k 6 z l ' :   1 ,   ' v h k 9 o r ' :   2 ,                           ' v h k f l n ' :   3 ,   ' v h k b v u ' :   4 ,   ' v h k 8 4 t ' :   5 ,                           ' v h k v x d ' :   6 ,   ' v h k q s c ' :   7 ,   ' v h k j j 4 ' :   8 ,                           ' v h k 0 f 1 ' :   9 }   #   商 家 联 系 电 话   c l a s s   属 性 h t m l _ d _ c l a s s   =   [ ' v h k b v u ' ,   ' v h k 0 8 k ' ,   ' v h k 0 8 k ' ,                                   ' ' ,   ' v h k 8 4 t ' ,   ' v h k 6 z l ' ,                                   ' v h k q s c ' ,   ' v h k q s c ' ,   ' v h k 6 z l ' ]   p h o n e   =   [ m a p p i n g s . g e t ( i )   f o r   i   i n   h t m l _ d _ c l a s s ]   #   将 映 射 后 的 结 果 打 印 输 出 p r i n t ( p h o n e ) [ 4 ,   0 ,   0 ,   N o n e ,   5 ,   1 ,   7 ,   7 ,   1 ]
图   6 - 2 0   大 众 点 评 商 家 信 息 页 大 众 点 评 的 商 家 信 息 页 主 要 用 于 展 示 消 费 者 对 商 家 的 各 项 评 分 、 商 家 电 话 、 店 铺 地 址 和 推 荐 菜 品 等 。 我 们 可 以 看 一 看 商 家 电 话 或 评 分 的   H T M L   代 码 ， 如 图   6 - 2 1   所 示 。 图   6 - 2 1   商 家 电 话   H T M L   代 码 大 众 点 评 中 的 商 家 号 码 并 不 是 全 部 使 用   d   标 签 代 替 ， 其 中 有 部 分 使 用 了 数 字 。 但 是 仔 细 观 察 一 下 就 可 以 发 现 商 家 号 码 的 数 量 等 于   d   标 签 数 量 加 上 数 字 的 数 量 ， 说 明   d   标 签 的   c l a s s   属 性 值 与 数 字 也 有 可 能 是 一 一 对 应 的 映 射 关 系 。 感 兴 趣 的 同 学 可 以 使 用 示 例   6   中 的 方 法 ， 尝 试 映 射 大 众 点 评 案 例 中 的 数 字 。 如 果 这 种 手 段 的 绕 过 方 法 这 么 简 单 的 话 ， 那 么 它 早 就 被 淘 汰 了 ， 为 什 么 连 大 众 点 评 这 样 的 大 型 网 站 都 会 使 用 呢 ？ 我 们 继 续 往 下 看 ， 大 众 点 评 的 商 家 营 业 时 间 部 分 的   H T M L   代 码 如 图   6 - 2 2   所 示 。
图   6 - 2 2   大 众 点 评 商 家 营 业 时 间 除 了 刚 才 的 数 字 映 射 之 外 ， 大 众 点 评 还 对 中 文 进 行 了 映 射 。 此 时 如 果 按 照 示 例   6   中 人 为 地 将   c l a s s   值 和 对 应 的 文 字 进 行 映 射 的 话 ， 就 非 常 麻 烦 了 。 试 想 一 下 ， 如 果 网 页 中 所 有 的 文 字 都 使 用 这 种 映 射 反 爬 虫 的 手 段 ， 那 么 爬 虫 工 程 师 要 如 何 应 对 呢 ？ 对 所 有 用 到 的 文 字 进 行 映 射 吗 ？ 这 不 可 能 做 到 ， 其 中 要 完 成 映 射 的 包 括   1 0   个 数 字 、 2 6   个 英 文 字 母 和 几 千 个 常 用 汉 字 。 而 且 目 标 网 站 一 旦 更 改 文 字 的 对 应 关 系 ， 那 么 爬 虫 工 程 师 就 需 要 重 新 映 射 所 有 文 字 。 面 对 这 样 的 问 题 ， 我 们 必 须 找 到 文 字 映 射 规 律 ， 并 且 能 够 使 用   P y t h o n   语 言 实 现 映 射 算 法 。 如 此 一 来 ， 无 论 目 标 网 站 文 字 映 射 的 对 应 关 系 如 何 变 化 ， 我 们 都 能 够 使 用 这 套 映 射 算 法 得 到 正 确 的 结 果 。 这 种 映 射 关 系 在 网 页 中 是 如 何 实 现 的 呢 ？ 是 使 用   J a v a S c r i p t   在 页 面 中 定 义 数 组 吗 ？ 还 是 异 步 请 求 A P I   拿 到   J S O N   数 据 ？ 这 都 有 可 能 ， 接 下 来 我 们 就 去 寻 找 答 案 。 6 . 3 . 3   S V G   反 爬 虫 原 理 反 爬 虫 原 理 映 射 关 系 不 可 能 凭 空 出 现 ， 一 定 使 用 了 某 种 技 术 特 性 。 H T M L   中 与 标 签   c l a s s   属 性 相 关 的 只 有   J a v a S c r i p t   和   C S S 。 根 据 这 个 线 索 ， 我 们 需 要 继 续 对 示 例   6   进 行 分 析 。 案 例 中 商 家 电 话 的   H T M L   代 码 为 ： 我 们 可 以 随 意 选 择 一 对   d   标 签 ， 然 后 观 察 它 对 应 的   C S S   样 式 有 没 有 可 以 深 入 分 析 的 线 索 ， 如 果 没 有 线 索 再 看   J a v a S c r i p t 。 d   标 签 的   C S S   样 式 如 下 ： < d i v   c l a s s = " c o l   m o r e " > 电 话 ：       < d   c l a s s = " v h k b v u " > < / d >         < d   c l a s s = " v h k 0 8 k " > < / d >         < d   c l a s s = " v h k 0 8 k " > < / d >         < d   c l a s s = " " > - < / d >         < d   c l a s s = " v h k 8 4 t " > < / d >         < d   c l a s s = " v h k 6 z l " > < / d >         < d   c l a s s = " v h k q s c " > < / d >         < d   c l a s s = " v h k q s c " > < / d >         < d   c l a s s = " v h k 6 z l " > < / d >   < / d i v > d [ c l a s s ^ = " v h k " ]   {         w i d t h :   1 4 p x ;         h e i g h t :   3 0 p x ;         m a r g i n - t o p :   - 9 p x ;  
d   标 签 样 式 看 上 去 没 有 什 么 特 别 之 处 ， 只 是 设 置 了   b a c k g r o u n d   属 性 的 坐 标 值 。 但 是 上 方   d   标 签 的 公 共 样 式 中 设 置 了 背 景 图 片 ， 我 们 可 以 复 制 背 景 图 片 的 地 址 ， 在 浏 览 器 的 新 标 签 页 中 打 开 ， d   标 签 背 景 图 如 图   6 - 2 3   所 示 。 图   6 - 2 3   标 签 背 景 图 d   标 签 的 背 景 图 中 全 部 都 是 数 字 ， 这 些 无 序 的 数 字 共 有   4   行 。 但 这 好 像 不 是 一 张 大 图 片 ， 我 们 查 看 该 图 片 页 面 的 源 代 码 ， 内 容 如 图   6 - 2 4   所 示 。 图   6 - 2 4   图 片 页 面 源 代 码 源 代 码 中 前 两 行 表 明 这 是 一 个   S V G   文 件 ， 该 文 件 中 使 用   t e x t   标 签 定 义 文 本 ，   s t y l e   标 签 用 于 设 置 文 本 样 式 ，   t e x t   标 签 定 义 的 文 本 正 是 图 片 页 面 显 示 的 数 字 。 难 道 这 些 无 序 的 数 字 就 是 我 们 在 页 面 中 看 到 的 电 话 号 码 和 评 分 数 字 ？ 除 了   c l a s s   属 性 值 为   v h k b v u   的   d   标 签 ， 其 他 标 签 也 使 用 了 这 个 的   C S S   样 式 ， 但 每 对   d   标 签 的 坐 标 定 位 都 不 同 。 它 们 的 坐 标 定 位 如 下 ：       m a r g i n - t o p :   - 9 p x ;         b a c k g r o u n d - i m a g e :   u r l ( . . / f o n t / f o o d . s v g ) ;         b a c k g r o u n d - r e p e a t :   n o - r e p e a t ;         d i s p l a y :   i n l i n e - b l o c k ;         v e r t i c a l - a l i g n :   m i d d l e ;         m a r g i n - l e f t :   - 6 p x ;   }   . v h k q s c   {             b a c k g r o u n d :   - 2 8 8 . 0 p x   - 1 4 1 . 0 p x ;   } . v h k b v u   {             b a c k g r o u n d :   - 3 8 6 p x   - 9 7 p x ;   }   . v h k 0 8 k   {             b a c k g r o u n d :   - 2 7 4 p x   - 1 4 1 p x ;  
坐 标 是 定 位 数 字 的 关 键 ， 要 想 知 道 坐 标 的 计 算 方 法 ， 必 须 了 解 一 些 关 于   S V G   的 知 识 。 在 本 节 开 始 的 时 候 ， 我 们 简 单 地 了 解 了   S V G   的 概 念 ， 知 道   S V G   是 基 于   X M L   的 。 实 际 上 它 是 用 文 本 格 式 的 描 述 性 语 言 来 描 述 图 像 内 容 的 ， 因 此   S V G   是 一 种 与 图 像 分 辨 率 无 关 的 矢 量 图 形 格 式 。 打 开 文 本 编 辑 器 ， 并 在 新 建 的 文 件 中 写 入 以 下 内 容 ： 将 该 文 件 保 存 为   t e s t . s v g ， 然 后 使 用 浏 览 器 打 开   t e s t . s v g   文 件 ， 显 示 内 容 如 图   6 - 2 5   所 示 。 图   6 - 2 5   t e s t . s v g   显 示 内 容 代 码 前   3   行 声 明 文 件 类 型 ， 第   4   行 ~ 第   5   行 定 义 了   S V G   内 容 块 和 画 布 宽 高 ， 第   6   行 使 用   t e x t   标 签 定 义 了 一 段 文 本 并 指 定 了 文 本 的 坐 标 。 这 段 文 本 就 是 我 们 在 浏 览 器 中 看 到 的 内 容 ， 而 代 码 中 的   x   坐 标 和   y   坐 标 则 用 于 确 定 该 文 本 在 画 布 中 的 位 置 ， 坐 标 规 则 如 下 。 • 以 页 面 的 左 上 角 为 零 坐 标 点 ， 即 坐 标 值 为   ( 0 ,   0 ) 。   • 坐 标 以 像 素 为 单 位 。 • x   轴 的 正 方 向 为 从 左 到 右 ， y   轴 的 正 方 向 是 从 上 到 下 。 • n   个 字 符 可 以 有   n   个 位 置 参 数 。 如 果 字 符 数 量 大 于 位 置 参 数 数 量 ， 那 么 没 有 位 置 参 数 的 字 符 将 以 最 后 一 个 位 置 参 数 为 零 坐 标 点 ， 并 按 原 文 顺 序 排 列 。 看 上 去 并 不 是 很 好 理 解 ， 我 们 可 以 通 过 修 改 代 码 来 理 解 坐 标 轴 的 定 义 。 首 先 是   x   轴 ，   t e x t   标 签 中 的   x   代 表 列 表 字 符 在 页 面 中 的 x   轴 位 置 ， t e s t . s v g   中 的   x   值 为   1 0 ， 现 在 我 们 将 其 设 为   0   ， 保 存 后 刷 新 网 页 ， 页 面 内 容 如 图   6 - 2 6   所 示 。           b a c k g r o u n d :   - 2 7 4 p x   - 1 4 1 p x ;   }   . v h k 8 4 t   {           b a c k g r o u n d :   - 1 7 6 p x   - 1 4 1 p x ;   } < ? x m l   v e r s i o n = " 1 . 0 "   e n c o d i n g = " U T F - 8 "   s t a n d a l o n e = " n o " ? >   < ! D O C T Y P E   s v g   P U B L I C   " - / / W 3 C / / D T D   S V G   1 . 1 / / E N "   " h t t p : / / w w w . w 3 . o r g / G r a p h i c s / S V G / 1 . 1 /     D T D / s v g 1 1 . d t d " >   < s v g   x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g "   v e r s i o n = " 1 . 1 "   x m l n s : x l i n k = " h t t p : / / w w w . w 3 . o r g /     1 9 9 9 / x l i n k "   w i d t h = " 2 5 0 p x "   h e i g h t = " 2 5 0 . 0 p x " >             < t e x t   x = ' 1 0 '   y = ' 3 0 ' > h e l l o , w o r l d < / t e x t >   < / s v g >
图   6 - 2 6   x   为   0   时 的   t e s t . s v g   显 示 内 容 x   的 值 为   0   时 ， 文 本 紧 贴 浏 览 器 左 侧 。 而   x   的 值 为   1 0   时 ， 文 本 距 离 浏 览 器 左 侧 有 一 定 的 距 离 ， 这 说 明   x   的 值 能 够 决 定 文 字 所 在 的 位 置 。 现 在 我 们 将 代 码 中   x   对 应 的 值 改 为 “ 1 0   5 0   3 0   4 0   2 0   6 0 ” （ 注 意 这 里 特 意 将 第   2 个 数 字   2 0 与 第   5 个 数 字 互 换 了 位 置 ） ， 这 样 做 是 为 了 设 定 前   6 个 字 符 的 坐 标 位 置 。 此 时 ， 第   1   个 字 符 的 位 置 参 数 为   1 0 ， 第   2   个 字 符 的 位 置 参 数 为   5 0 ， 第   3   个 字 符 的 位 置 参 数 为   3 0 ， 以 此 类 推 ， 页 面 中 正 常 显 示 的 文 字 顺 序 应 该 是 ： 但 是 由 于 我 们 调 换 了 第   2   个 字 符 和 第   5   个 字 符 的 位 置 参 数 ， 即 字 母   e   和 字 母   o   的 位 置 互 换 ， 如 图   6 - 2 7   所 示 。 图   6 - 2 7   设 定 多 个   x   值 的   s v g   图   6 - 2 7   中 文 字 顺 序 与 我 们 猜 测 的 顺 序 是 一 样 的 ， 这 说 明   S V G   中 每 个 字 符 都 可 以 有 自 己 的   x   轴 坐 标 值 。 y   与   x   同 理 ， 每 个 字 符 都 可 以 有 自 己 的   y   轴 坐 标 值 。 虽 然 我 们 只 设 定 了   6   个 位 置 参 数 ，   s v g   中 的 字 符 却 有   1 1   个 ， 但 没 有 设 定 位 置 参 数 的 字 符 依 然 能 够 按 照 原 文 顺 序 排 序 。 在 了 解   S V G   基 本 知 识 之 后 ， 我 们 回 头 看 一 下 案 例 中 所 使 用 的   S V G   文 件 中 坐 标 参 数 的 设 定 ， 图   6 - 2 3   中 的 字 符 与 图   6 - 2 4   图 片 页 源 代 码 中 的 字 符 一 一 对 应 ， 且 每 个 字 符 都 设 定 了   x   轴 的 位 置 参 数 ， 而   y   轴 则 只 有   1   个 值 。 在 了 解 位 置 参 数 之 后 ， 我 们 还 需 要 弄 清 楚 字 符 定 位 的 问 题 。 浏 览 器 根 据   C S S   样 式 中 设 定 的 坐 标 和 元 素 宽 高 来 确 定   S V G   中 对 应 数 字 。 x   轴 的 正 方 向 为 从 左 到 右 ， y   轴 的 正 方 向 是 从 上 到 下 ， 如 图   6 - 2 8   所 示 。 h o l l e , w o r l d
图   6 - 2 8   S V G   x   轴 和   y   轴 与 位 置 参 数 的 关 系 而   C S S   样 式 中 的   x   轴 与   y   轴 是 相 反 的 ， 也 就 是 说   C S S   样 式 中   x   轴 是 负 数 向 右 的 ， y   轴 是 负 数 向 下 的 ， 如 图   6 - 2 9   所 示 。 图   6 - 2 9   C S S   x   轴 和   y   轴 与 位 置 参 数 的 关 系 所 以 当 我 们 需 要 在   C S S   中 定 位   S V G   中 的 字 符 位 置 时 ， 需 要 用 负 数 表 示 。 我 们 可 以 通 过 一 个 例 子 来 理 解 它 们 的 关 系 ， 现 在 需 要 在   C S S   中 定 位 图   6 - 3 0   中 第   1   行 的 第   1   个 字 符 的 中 心 点 。
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

使用Markdown编辑器编辑 使用富文本编辑器编辑

Archiver| 手机版| 小黑屋|
Powered by Discuz! X3.4 Copyright © 2001-2020, Tencent Cloud. 商业源码建议获取授权，如侵犯您的权益，请联系客服处理