3. 环保流程图布局规划与SVG结构设计
废水处理预处理段的流程图，看起来只是“几个池子加几条箭头”，但真正落到SVG里，最先要解决的不是画得多漂亮，而是布局逻辑：水往哪里走、哪些设备必须严格对齐、哪些支路要留出插入空间、哪些图形元素可以复用。预处理段通常包含格栅、调节池、提升泵、沉砂池、初沉池以及加药或撇渣等辅助单元，主水流是线性的，但排砂、排泥、加药、回流又形成分支。如果布局规划没做好，后面再调样式就会反复返工。
一、线性主链与分支支路的布局原则
预处理段的主工艺流程一般是：进水→格栅→调节池→提升泵→沉砂池→初沉池→后续生化段。这条主链应当沿单一水平方向从左到右排布，因为读者对“水流方向”的默认预期是水平向右，纵向只用来表达辅助关系。主链上的设备中心线应落在同一条水平基准线上，这条基准线建议取画布高度的40%～45%，给上方留出标注、加药点和标题空间，下方留出排泥、排砂和管廊空间。
分支支路的处理要遵循“主链不打断、支路向下或向上短距离引出”的原则。例如格栅的栅渣外运、沉砂池的排砂、初沉池的排泥，都属于向下引出的短支路，箭头终点用一个小方框或文字标注“栅渣外运”“砂水分离”“污泥浓缩”即可，不必把完整后续工艺画进来。加药点则适合向上引出，用一个小圆点加“PAC/PAM”标注，表示药剂投加点位。这样主链保持干净，分支信息又不丢失。
需要特别注意的是回流与超越管线。调节池常设超越管，事故时直接进入后续单元；这类管线如果与主链同层绘制，容易和主水流混淆。建议用不同颜色（如橙色虚线）并布置在主链下方一条独立的水平通道上，起终点用带箭头的折线连接，转折处保持90°直角，避免斜线穿越设备。
二、设备间距与对齐规则
设备间距不是随手留白，而要形成可读的节奏。建议以设备符号宽度为基本模数：相邻设备之间的净间距取设备宽度的0.6～0.8倍，保证箭头和文字标注有足够空间；同类设备（如两座并列的初沉池）之间取0.3～0.4倍，体现“同组”关系。整条主链的设备符号建议统一高度，宽度可按池体实际比例微调，但差异不宜超过1.5倍，否则视觉上会失去平衡。
对齐规则可以归纳为三条：主链设备中心水平对齐；同类标注文字基线对齐；分支引出点垂直对齐于设备中心。文字标注统一放在设备符号正下方，距符号底边约8～12像素，设备名称与编号分两行，例如“格栅 / G-101”。编号规则在预处理段内保持连续，便于与后续工艺衔接。
三、用<g>分组组织图层语义
SVG的<g>元素不只是“打包”，更是图层语义的载体。预处理段草图建议至少分成以下几组：<g id="main-flow">放主链设备与主水流箭头；<g id="branch-flow">放排砂、排泥、加药等支路；<g id="labels">放所有文字标注；<g id="annotations">放图例、比例说明和标题。分组后，调整某一类元素的样式（如统一改箭头颜色）只需在组上设置一次stroke或fill，子元素自动继承，避免逐个修改。
分组还便于控制显示顺序。SVG按文档顺序绘制，后画的覆盖先画的。把主水流箭头放在设备符号之后绘制，箭头就能压在池体边框上，视觉上更连贯；把文字标注组放在最后，确保文字不被图形遮挡。如果后续要做交互（如鼠标悬停高亮某设备），分组也是绑定事件的基础单位。
四、用<defs>定义复用组件
预处理段里重复出现的图形主要有三类：箭头标记、设备符号、管件符号。箭头最适合用<defs>加<marker>定义，主水流用实心三角箭头，支路用空心或不同颜色的箭头，通过marker-end引用，改箭头大小只需改一处。设备符号可以用<symbol>定义，例如矩形池体符号、圆形泵符号，再用<use>按需实例化，并通过x、y定位、width、height缩放。这样两座初沉池、多台提升泵就不必重复写路径。
需要提醒的是，<use>引用的符号内部如果含有文字，文字会随符号一起缩放，可能导致字号不一致。因此建议符号内只放几何图形，文字标注单独放在labels组，这样字号始终可控。另外，<marker>的orient="auto"能让箭头自动跟随线段方向，画折线支路时尤其方便。
五、从草图到可维护的SVG结构
把上面的布局落成代码时，建议先写<defs>，再写<g id="main-flow">，最后写标注组。主链设备的y坐标统一取同一值（示例中池体高60、中心线230，故y=200），x坐标按“设备宽度+净间距”递推。以示例为例：格栅宽100、净间距50，则调节池x=90+100+50=240；调节池宽110、净间距50，提升泵x=240+110+50=400，依此类推。这种递推方式让间距有据可依，后期增删设备时只需重算后续坐标，不会出现忽宽忽窄。
分支线的起点应严格取设备中心x值，向下引出的长度统一取60像素，终点标注框统一宽80、高26，这样三条排渣排泥支路在视觉上形成整齐的“梳齿”结构。超越管走下方独立通道，水平段y=400，与排渣标注框（y=322～348）保持约50像素间隔，避免文字与管线重叠。
完成布局后，检查三件事：主链设备中心是否共线、同类标注基线是否一致、所有箭头是否指向明确且不穿越设备。这三项通过，预处理段草图就具备了继续细化（加管径标注、加液位线、加构筑物剖面）的稳定骨架。