📚 课程目录第2章 SVG基础与环保流程图元素映射

2. SVG基础与环保流程图元素映射

在环保工艺流程图里，我们最终要画出来的无非是池体、泵、风机、阀门、管道和标注文字。SVG 之所以适合做这件事，是因为它用一套简洁的坐标与图形语法，就能把这些设备抽象成可复用、可缩放的图元。本节先讲清 SVG 的坐标系统与基本图形语法，再落到“环保设备如何映射为图元”这个关键问题上。

一、坐标系、视口与 viewBox

SVG 的坐标原点在左上角，x 轴向右为正，y 轴向下为正，这一点与数学坐标系不同，画图时必须牢记。所有图形的位置、尺寸都以用户坐标（user unit）计量，默认 1 个单位对应 1 像素。

视口（viewport）由 <svg> 元素的 width 和 height 决定，表示这块画布在页面上占多大。而 viewBox 定义的是“用户坐标系中的哪一块矩形区域”被映射到视口里，语法为 viewBox="min-x min-y width height"。例如 viewBox="0 0 800 600" 表示用户坐标从 (0,0) 到 (800,600) 的区域铺满整个视口。当视口尺寸变化时，viewBox 内的内容会等比缩放，这正是流程图能自适应不同屏幕的关键。

需要特别注意 preserveAspectRatio 的默认值 xMidYMid meet：它保证内容等比缩放并居中，不会拉伸变形。对于工艺流程图，保持比例非常重要——池体的长宽比若被拉伸，读图者会误判池型。因此通常保留默认值即可。

二、基本图形语法

SVG 的常用图元不多，但足以覆盖流程图需求：

矩形 <rect x y width height rx ry>：rx/ry 控制圆角，画池体、设备箱体最常用。
圆 <circle cx cy r> 与椭圆 <ellipse cx cy rx ry>：适合画泵、风机叶轮、仪表。
直线 <line x1 y1 x2 y2>：画管道、引线。
折线 <polyline points="..."> 与多边形 <polygon points="...">：画箭头、异形设备轮廓。
路径 <path d="...">：最灵活，用 M（移动到）、L（直线到）、C/Q（贝塞尔曲线）、A（圆弧）描述任意轮廓，画弯管、弧形池壁、箭头头部都靠它。
文本 <text x y>：标注设备名称与参数，配合 text-anchor 控制对齐。

这些图元共享一组“表现属性”：fill（填充色）、stroke（描边色）、stroke-width（线宽）、opacity（透明度）。流程图里常用“浅色填充 + 深色描边”来区分设备类型，用线宽区分主管与支管。

三、环保设备到图元的映射

把真实设备抽象成图元，核心是抓住“识别特征”而非写实。下面这张图展示了本节最关键的映射关系：左侧是设备对象，右侧是对应的 SVG 图元组合与关键属性。

映射时建议遵循三条原则。第一，一设备一图元组：池体用 rect 加一条虚线液位线，泵用 circle 加十字 path，风机用圆角 rect 内嵌叶轮，阀门用菱形 polygon。第二，颜色编码设备类别：水处理设备用蓝、加药与风机用橙、阀门用紫，读图时一眼可辨。第三，尺寸统一：同类设备用相同尺寸，避免视觉误导。

四、一个可运行的示例

下面这段代码画出一个带液位线的调节池和一个泵，并标注名称。注意 viewBox 与坐标的配合：所有坐标都落在 0～400 与 0～200 的范围内。

<svg viewBox="0 0 400 200" width="400" height="200">
  <rect x="40" y="40" width="140" height="110" rx="6"
        fill="#e3f2fd" stroke="#1976d2" stroke-width="2"/>
  <line x1="40" y1="90" x2="180" y2="90"
        stroke="#42a5f5" stroke-width="2" stroke-dasharray="6 4"/>
  <text x="110" y="170" text-anchor="middle" font-size="14">调节池</text>
  <circle cx="280" cy="95" r="26" fill="#e8f5e9"
          stroke="#2e7d32" stroke-width="2"/>
  <path d="M280,75 L280,115 M260,95 L300,95"
        stroke="#2e7d32" stroke-width="2"/>
  <text x="280" y="150" text-anchor="middle" font-size="14">提升泵</text>
</svg>

把这段代码放进 HTML 页面，就能看到两个设备。若把 viewBox 改成 "0 0 800 400" 而 width 不变，图形会整体缩小一半并居中——这就是 viewBox 控制“显示哪块区域”的直接体现。实际绘制流程图时，建议先按 1:1 的用户坐标规划布局（例如 800×600 的画布），再统一用 viewBox 适配输出尺寸，这样坐标计算最直观。

绘制前先确定画布用户坐标范围（如 0～800、0～600），所有设备坐标都基于这个范围计算；输出时只改 width/height 与 viewBox 的映射，不改图形坐标，可避免反复调位置。

掌握坐标与图元语法后，下一步才是把多个图元按工艺流程连接成完整图面。本节的重点是建立“设备—图元—属性”的对应直觉：看到池体想到 rect，看到泵想到 circle，看到阀门想到 polygon，看到管道想到 line 或 path。这个直觉一旦形成，后续绘制复杂流程图时就能快速落笔。