企业官网建设流程全解析

简介：面向电力系统绘图开发人员与电气设计人员的一份SVG电力图元定义文档，聚焦单线图绘制中常用图符的标准化描述，解决不同绘图软件与编程语言之间图元风格不一、坐标不精确的问题。文档以隔离开关为典型示例，按竖直/水平、刀上/刀下、分/合等状态逐一给出Symbol ID、示意图形与完整SVG定义代码，并说明如何通过旋转、镜像等transform变换从基础图元扩展出不同方向与位置的图元，避免重复绘制、保证接线图简洁美观。资源包内共1个doc文件，约5.2MB，集中收录图符定义与XML语法说明，可直接对照查阅并导入使用。目前已有2980人学习下载，适合需要统一电力图元规范、提升成图效率与精度的从业者参考。

1. 电力图元为什么要落在 SVG 上：从一张糊掉的单线图说起

某调度大屏改版，单线图上三百多个开关刀闸要随遥信实时变色，还得能缩到 0.3 倍看清全线走向。第一版图元是设计侧切的位图，放大一圈全是马赛克，改一个状态就要重导一套图，返工三次之后团队换成了 SVG 格式定义的电力图元/电力图符。简单说，它把断路器、隔离开关、变压器、母线这些一次设备的图形，用矢量路径加一组约定好的元数据表达出来，让渲染层能按设备类型找图、按状态换色、按端子布线。做配网自动化、集控站画面、数字孪生底图的人，绕不开这一层。下面按“契约怎么定、符号怎么批量产出、状态怎么驱动、坑在哪”讲透。

2. 把一次设备符号拆成渲染契约：viewBox、端子与状态位怎么定

图元不是一张好看的图，它是要被程序反复消费的数据结构。一张丢进目录就没人管的 SVG，和一份能被渲染器、布线器、校验脚本同时读懂的 SVG，差别全在契约上。这一章先把契约定死，后面批量生成和状态着色才有地基。

2.1 为什么几何与状态必须分离

设计侧交过来的图，习惯把“合闸是红色、分闸是绿色”直接画成两套文件。这种做法的代价在设备种类上去以后会指数级放大：十种设备乘五种状态就是五十个文件，改一处线宽要改五十遍，代码里还得维护一张文件名映射表，维护成本高得离谱。

我的做法是把几何和状态彻底拆开。几何只描述形状：外壳轮廓、刀闸刀片、绕组圆、母线折线，全部用中性色或者currentColor画。状态由外层的 class 和 CSS 变量注入。这样十个设备还是十个文件，状态维度交给样式表，颜色换肤、暗色模式、告警高亮都不用动图元本身。

第二个理由是 SVG 是纯文本。放进 Git 之后，改一根线的坐标能看出 diff，评审时能定位到具体路径。二进制位图做不到这一点，这也是我在选型上坚决不走 Canvas 精灵图的原因——Canvas 渲染几千节点确实更快，但图元本身失去了可评审、可脚本化处理的能力，符号库一多人就管不住了。

还有一个隐性收益：SVG 的<symbol>加<use>天然支持复用。同一个 10kV 断路器在图元库里只有一份定义，画面上出现两百次也只增加引用节点，几何数据不重复存储。

2.2 一个断路器图元的完整契约长什么样

下面是实际在用的最小契约模板。注意根元素上的><!-- symbols/breaker/breaker.svg --> <symbol id="sym.breaker" viewBox="0 0 64 64" >const GRID = 64; // 从 symbol 元素提取端子表，坐标系为 viewBox 局部坐标 function parseTerminals(symEl) { const raw = symEl.dataset.terminals || ''; return raw.split(';').filter(Boolean).map(seg => { const [tid, xy] = seg.split(':'); const [x, y] = xy.split(',').map(Number); if (Number.isNaN(x) || Number.isNaN(y)) { throw new Error(`端子坐标非法: ${seg}`); } return { tid, x, y }; }); } // 图元旋转后，端子必须跟着转，否则布线会连到错误位置 function rotateTerminals(list, deg, cx = GRID / 2, cy = GRID / 2) { const rad = (deg * Math.PI) / 180; const cos = Math.cos(rad), sin = Math.sin(rad); return list.map(({ tid, x, y }) => { const dx = x - cx, dy = y - cy; return { tid, x: +(cx + dx * cos - dy * sin).toFixed(3), y: +(cy + dx * sin + dy * cos).toFixed(3) }; }); } // 汇总成一个设备节点，供布线器与状态机共用 function buildNode(symEl, { id, x, y, rot = 0 }) { const terms = rotateTerminals(parseTerminals(symEl), rot); return { id, devtype: symEl.dataset.devtype, x, y, rot, terminals: terms }; }

逻辑说明：parseTerminals只做解析和校验，遇到非法坐标直接抛错而不是静默跳过，这样批量导入几千个设备时能在第一批就暴露脏数据，而不是等到画面上一半设备连不上线才发现。rotateTerminals在局部坐标系里做旋转，中心取viewBox中心点，和 SVG 的transform="rotate(deg 32 32)"语义保持一致，两边算出来的位置才对得上。

参数上唯一需要留意的是旋转角度只支持 0、90、180、270 四个值。任意角度在电力图里没有实际意义，还会让端坐标落在非整数位置，布线出来歪歪扭扭，不如直接禁用。

2.4 网格对齐：为什么我把 viewBox 死死按在 64

这一节讲的是一个看起来很玄学、但翻车率极高的细节。设备坐标经过画布缩放后，如果一根线的 y 坐标落在 32.5，浏览器为了抗锯齿会把它画成两行各 50% 透明度的像素，视觉上就是一条发虚的灰线。屏幕上叠几百条这样的线，整张单线图会呈现出一种“脏”的质感，用户第一反应是“这系统做得不行”。

对策是把所有几何坐标钉在整数网格上，并且线宽取偶数。viewBox定 64，内圈画图区域从 4 到 60，坐标基本都是 4 的倍数。渲染时设备位置也量化到网格：

// 设备落位时量化到网格，避免半像素渲染导致线条发虚 const snap = (v, g = 4) => Math.round(v / g) * g;

只在设备和连线层量化，不量化缩放变换本身。缩放是连续量，强行量化会让拖动缩放时画面一跳一跳。线条发虚的根因在坐标而非缩放，这个区分很关键。

顺带一提，shape-rendering="crispEdges"只对纯正交的直线有效，给圆和斜线加上去反而更丑，所以只在母线这类纯水平垂直的图元上局部使用，不要全局开。

3. 用 Python 批量生成图元符号表：从设备清单到可校验的 sprite

手工维护几十个 SVG 文件还能靠自觉，到两百个设备类型就必须上流水线。这一章的脚本解决三件事：把设计侧各种工具导出的脏 SVG 洗干净、统一坐标系、拼成一张可内联的 sprite 并输出索引清单。

3.1 目录约定与设备清单

目录结构先定死，脚本和人工都按这个走：

symbols/ breaker/ # 设备类型目录，与># build_sprite.py（片段一：清洗） from lxml import etree import re SVG_NS = "http://www.w3.org/2000/svg" KEEP_TAGS = { "g", "path", "rect", "circle", "line", "polyline", "polygon", "text", "defs", "linearGradient", "stop", "title" } DROP_TAGS = {"image", "foreignObject", "metadata", "script", "style"} def clean(src_path: str) -> etree._Element: tree = etree.parse(src_path) root = tree.getroot() # 删除危险标签与编辑器私有节点 for el in list(root.iter()): tag = etree.QName(el).localname if isinstance(el.tag, str) else "" if tag in DROP_TAGS: el.getparent().remove(el) # 压平嵌套：只保留白名单标签，其余替换为子节点 for el in list(root.iter()): if not isinstance(el.tag, str): continue tag = etree.QName(el).localname if tag not in KEEP_TAGS and tag != "symbol": parent = el.getparent() idx = parent.index(el) for child in list(el): parent.insert(idx, child) parent.remove(el) # 剥掉除 id/class/data-*/d 之外的属性，减少体积 for el in root.iter(): if not isinstance(el.tag, str): continue for k in list(el.attrib): if k.startswith("{") or k in ("style",): del el.attrib[k] return root

逻辑说明：DROP_TAGS是硬红线。嵌入位图的图元在缩放时会糊，foreignObject里的内容在部分渲染引擎里直接不显示，script更不用说，是注入风险。白名单压平是为了把设计工具习惯加的十几层嵌套<g>打平，DOM 节点数能降一半，对几千节点的单线图来说是实打实的性能收益。

参数上，style属性被整条删除，是因为设计工具常把颜色写死在行内样式里，会覆盖外层 CSS 的状态着色。删除之后颜色统一由样式表控制，这也是 2.1 节说的几何与状态分离的落地手段。

3.3 抽取端子、统一 viewBox 与拼装 sprite

清洗完之后要统一坐标系。设计稿的viewBox千奇百怪，有的是0 0 1024 768，有的是带负偏移的。统一缩放到 64 网格这一步不能省。

# build_sprite.py（片段二：归一化与拼装） import json from pathlib import Path GRID = 64 def normalize(root, pad_ratio=0.08): vb = root.get("viewBox") if not vb: raise ValueError("缺少 viewBox，无法归一化") minx, miny, w, h = [float(v) for v in re.split(r"[,\s]+", vb.strip())] scale = (GRID * (1 - 2 * pad_ratio)) / max(w, h) dx = (GRID - w * scale) / 2 - minx * scale dy = (GRID - h * scale) / 2 - miny * scale g = etree.SubElement(root, f"{{{SVG_NS}}}g") g.set("transform", f"translate({dx:.4f},{dy:.4f}) scale({scale:.6f})") for child in list(root): if child is not g: g.append(child) root.set("viewBox", f"0 0 {GRID} {GRID}") return root def extract_terminals(root): out = [] for c in root.iter(f"{{{SVG_NS}}}circle"): if "terminal" in (c.get("class") or ""): out.append(f'{c.get("data-tid")}:{c.get("cx")},{c.get("cy")}') return ";".join(out) def build(manifest_rows, out_dir="dist"): sprite = etree.Element(f"{{{SVG_NS}}}svg", nsmap={None: SVG_NS}) sprite.set("style", "display:none") # 内联后不占布局 sprite.set("aria-hidden", "true") index = {} for row in manifest_rows: root = clean(f"symbols/{row['file']}") root = normalize(root) sym = etree.Element(f"{{{SVG_NS}}}symbol") sym.set("id", f"sym.{row['devtype']}") sym.set("viewBox", root.get("viewBox")) sym.set("data-devtype", row["devtype"]) sym.set("data-uk", row["uk"]) sym.set("data-grid", str(GRID)) sym.set("data-terminals", row["terminals"] or extract_terminals(root)) sym.set("data-states", row["states"]) for child in list(root): sym.append(child) sprite.append(sym) index[row["devtype"]] = { "uk": row["uk"], "states": row["states"].split(","), "terminals": sym.get("data-terminals") } Path(out_dir).mkdir(exist_ok=True) etree.ElementTree(sprite).write(f"{out_dir}/sprite.svg", encoding="utf-8") Path(f"{out_dir}/manifest.json").write_text( json.dumps(index, ensure_ascii=False, indent=2), encoding="utf-8" )

逻辑说明：normalize用一次translate + scale把任意尺寸的设计稿塞进 64 网格，pad_ratio留 8% 的内边距，防止图元贴边导致选中框和告警光晕被裁掉，这个值我试过 0.05 到 0.15，0.08 在开关类图元上视觉最舒服。extract_terminals只在清单没写端子时兜底，注意它抽取的是归一化之后的坐标——这一点顺序千万不能反，先归一化再抽端子，否则端子坐标和几何对不上，布线全歪。

display:none的 sprite 内联进页面后，<use>引用里面的<symbol>仍然能渲染，这是标准行为，不用担心。aria-hidden是为了避免读屏软件把符号库里的几百个节点念一遍。

构建完之后跑一次校验，把问题挡在发布前：

python -c " import json,sys m=json.load(open('dist/manifest.json')) bad=[k for k,v in m.items() if len(v['terminals'].split(';'))<1] print('图元总数', len(m), '缺端子', bad); sys.exit(1 if bad else 0) "

这个检查看着简陋，但拦下过好几次真实事故：设计侧新增的双绕组变压器图元忘了画端子，画面上一整片变压器孤零零飘着，没有任何连线。

4. 状态着色与告警联动：CSS 变量驱动图元的最小实现

图元进了页面，接下来是让它“活”起来。电力图的状态不是简单的开关两态，实际现场至少要区分带电合、带电分、失电合、失电分、未知或检修这五种组合，再叠加告警。状态维度用组合 class 表达，颜色用 CSS 变量收口。

4.1 五态模型与颜色 token

先落一张状态到视觉的映射表，这张表要和运行值班人员对一遍，别自己拍脑袋定。

颜色 token 统一在根上声明，换肤和暗色模式只改一处：

:root { --c-live: #d0202e; /* 带电 */ --c-dead: #2f7d32; /* 失电 */ --c-unknown:#8a8a8a; /* 未知 */ --c-alarm: #ff6a00; /* 告警 */ --c-line: #1f1f1f; /* 符号骨架 */ } /* 图元骨架：几何用 currentColor，状态色靠 currentColor 继承进去 */ .pwr .geo .body, .pwr .geo .blade { fill: #fff; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; } .pwr.st-closed.live { color: var(--c-live); } .pwr.st-closed.live .body { fill: var(--c-live); } .pwr.st-open.live { color: var(--c-live); } .pwr.st-closed.dead { color: var(--c-dead); } .pwr.st-closed.dead .body { fill: var(--c-dead); } .pwr.st-open.dead { color: var(--c-dead); } .pwr.st-unknown { color: var(--c-unknown); } .pwr.st-unknown .body { fill: none; stroke-dasharray: 4 3; }

关键在于.geo里的形状只写stroke: currentColor，具体颜色由根元素的color决定。这样一套样式能同时管住所有设备类型，新增图元不用改样式表。vector-effect: non-scaling-stroke必须加，否则画布缩到 0.3 倍时线宽跟着缩成 0.6px，整张图会淡到看不见。

4.2 状态切换的最小实现

状态更新的入口只留一个函数，所有数据源都走这里，避免十处八处各自改 class。

// 单一入口：把设备状态同步到画面节点 const STATE_CLASSES = ['st-closed', 'st-open', 'st-unknown']; function renderState(nodeEl, { state, energized, alarm = false }) { // 1) 先清旧状态，防止上一次的 class 残留 nodeEl.classList.remove(...STATE_CLASSES, 'live', 'dead', 'alarm'); // 2) 状态位与电气量解耦：未知态优先，不参与带电判断 if (state === 'closed' || state === 'open') { nodeEl.classList.add(`st-${state}`); nodeEl.classList.add(energized ? 'live' : 'dead'); } else { nodeEl.classList.add('st-unknown'); } // 3) 告警叠加，未知态也允许告警 if (alarm) nodeEl.classList.add('alarm'); // 4) 无障碍：把状态写进 aria-label，读屏和自动化测试都能读 nodeEl.setAttribute( 'aria-label', `${nodeEl.dataset.uk || ''} ${state} ${energized ? '带电' : '失电'}${alarm ? ' 告警' : ''}` ); }

逻辑说明：先remove再add是必须的，遥信抖动时状态会来回切，如果只 add 不 remove，节点上的 class 会越积越多，最后st-closed和st-open同时存在，谁赢取决于样式表顺序，排查起来非常痛苦。未知态单独处理而不是归到分闸，是因为现场最怕的就是把“不知道”画成“分闸”，值班员会误判。

aria-label这一行看起来和电力图无关，但实际很有价值：自动化截图比对的测试脚本可以直接读它做断言，不用去比对像素。

4.3 告警闪烁的节流与降级

闪烁动画最容易被低估。几十个告警元素各自跑一个 CSS 动画，在低配终端上帧率会掉到 20fps 以下，画面整体发涩。我的处理是全局只留一个节拍器，统一翻转一个根元素上的 class：

// 全局节拍器：一个大屏只跑一个定时器，所有告警图元共享相位 let tick = 0; setInterval(() => { tick ^= 1; document.documentElement.classList.toggle('blink-on', !!tick); }, 600); // 对应样式：没有单独动画，元素只响应根 class // .pwr.alarm { color: var(--c-alarm); } // .blink-on .pwr.alarm .body { opacity: .3; }

参数上 600ms 是一个折中：小于 400ms 视觉上太躁，大于 800ms 又会让人以为卡住了。同一相位还有一个额外好处——所有告警同时亮灭，画面节奏统一，不会出现此起彼伏的“迪斯科”效果。

降级策略分两档。低配终端上直接关掉闪烁，只保留橙色高亮，配置项写在前端配置里，由部署方按终端性能决定。开启系统级减少动效偏好时，CSS 媒体查询自动接管：

@media (prefers-reduced-motion: reduce) { .blink-on .pwr.alarm .body { opacity: 1; } }

提示：告警图元超过三十个时，优先检查是不是数据源在抖。曾遇到遥信上送没做去抖，同一个开关一秒内变位七八次，前端看着像动画卡死，实际是后端在刷状态。

5. 避坑与排查：电力图元接入现场最常翻车的 5 个点

这一章全是踩过的坑，按现象、原因、解决三段写。每条都是线上真实出过的问题，不是假设。

第一条：画面缩小后整张图淡到看不见。

现象是画布缩到 0.3 倍时，线条几乎消失，放大回来又正常。原因是 SVG 的描边宽度默认随变换缩放，stroke-width: 2在 0.3 倍下实际渲染 0.6px，抗锯齿后颜色被稀释。解决办法是在样式表里给所有描边元素加vector-effect: non-scaling-stroke，让线宽锁定在屏幕像素。注意这个属性对fill无效，填充色不需要处理。加完之后要复查一遍图元，个别用<path>描边画的符号在极端缩放下会出现 1px 的接缝，通常是路径没有闭合，补个Z就好。

第二条：<use>引用了外部 sprite，状态样式打不进去。

现象是用<use href="sprite.svg#sym.breaker">引用外部文件，外层写的.st-closed .body { fill: red }完全不生效，图元永远是一副灰色骨架。原因是外部引用的内容会被放进影子树，普通 CSS 选择器无法穿透，只有可继承属性（color、fill、currentColor和自定义属性）能进去。解决办法是把 sprite 内联到页面里，用fetch拿到文本后插到<body>顶部，构建期直接打包进 HTML 更省事。内联之后选择器可以正常命中，代价是首屏 HTML 变大，两百个图元大约多出几百 KB，做 gzip 之后可以接受。如果实在要用外链，就只能靠currentColor传递颜色，状态切换会受限于“颜色”这一个维度，表达不了虚线、透明这类差异。

第三条：旋转 90 度之后连线全部连到图元外面。

现象是横放正常的隔离开关，转成竖放后两端连线飞到图元框外。原因是渲染层用transform="rotate(90 32 32)"旋转了图形，但布线器读的还是原始端子坐标t1:8,32，几何转了、数据没转。解决办法有两个，我选的是数据侧旋转：布线前调用 2.3 节的rotateTerminals，把端子坐标算好再交给布线器，DOM 上不再做transform，只改设备落位。另一个方案是保留transform并在布线器里做坐标变换，但那样每次连线都要算矩阵，调试时很难对齐，不推荐。

第四条：文字标注被塞进图元，缩放后糊成一团。

现象是设备编号跟着图元缩放，缩到 0.5 倍时字全糊了，放大又大得离谱。原因是<text>放在<symbol>里，跟着整体缩放走。解决办法是文字层与图元层彻底分开：图元里不放任何<text>，设备编号由渲染层在同一个 SVG 里另起一个<g class="labels">绘制，字号固定，缩放时只改位置不改大小。这样还顺带解决一个老大难问题——中文标注在客户端缺字体时会回退成方框，独立文本层可以统一指定字体栈，而图元里如果有文字转不成路径就会变成一堆框。校验脚本里加一条规则：<symbol>下的<text>数量超过零就报警。

第五条：图元文件 ID 撞车，页面里只显示一个。

现象是把多个图元的 SVG 直接内联进页面后，几十个不同设备全变成同一个形状。原因是设计工具导出的每个文件里都有id="Layer_1"、id="path1234"这类通用 ID，内联到同一文档后 ID 冲突，浏览器只认第一个。解决办法是构建期给所有内部 ID 加前缀：prefix + '_' + oldId，同时把url(#oldId)的引用一起替换。脚本里做一遍正则替换即可，重点是clipPath、linearGradient、mask的引用必须同步改，漏一个就会出现渐变突然失效的怪现象。这件事没有后悔药，只能在构建期做，浏览器端补救成本极高。

6. 图元库的验收与增量演进：一份能长期跑的自检清单

图元库真正的成本不在第一版，而在后面两年不断加设备、改样式、换渲染引擎。我现在的习惯是每次新增图元都过一遍下面这张表，任何一项不过就不合并。这份清单是从几次大规模返工里逼出来的，比任何文档都好用。