根本原因是节点坐标和连线端点未绑定同一份数据源；必须用统一数据对象（如nodea = {x: 200, y: 150}）驱动所有图形属性，拖拽时同步更新节点位置与关联连线端点，避免硬编码或transform导致的坐标脱钩。
直接用原生 HTML5 + SVG 就能做出可交互、可缩放、响应式的服务拓扑图，不需要引入 D3 或 Vis.js 等重型库——前提是数据结构清晰、坐标管理得当、连线更新逻辑不脱钩。
SVG 里画节点和连线，为什么拖拽后连线总“掉”？
根本原因是节点坐标和连线端点没绑定同一份数据源。硬写 cx="120" cy="85" 和 x1="120" y1="85" 看似对应，但拖拽时只改了 <circle></circle> 的属性，<line></line> 的 x1/y1 没同步更新，视觉上就“脱钩”了。
- 每个节点对象必须持有
{x, y}属性（比如nodeA = {id: 'api-01', x: 200, y: 150}），所有图形绘制都读这个值 -
<line></line>的x1必须等于nodeA.x，x2必须等于nodeB.x；不要用transform移动节点，否则getBBox()取不到真实坐标 - 拖拽时只更新
nodeA.x/nodeA.y，然后遍历所有关联的<line></line>，重设其x1/y1或x2/y2 - 别在
mousemove里反复调用svg.getBoundingClientRect()，偏移量应在mousedown时缓存一次
WebSocket 推送拓扑变更，前端怎么避免状态错乱？
微服务拓扑是强一致性结构，不能靠前端拼凑。服务端推送的每条消息若没带版本号或时间戳，客户端就无法判断 delta 是新增、覆盖还是过期丢弃。
- 首次连接必须收全量快照（
{"type": "snapshot", "version": 123, "nodes": [...], "edges": [...]}） - 后续增量消息必须含
version字段，且单调递增；前端用lastAppliedVersion记录，小于它的直接丢弃 - 收到
{"type": "nodeUpdate", "id": "svc-auth", "status": "unhealthy"}后，只更新对应节点的data-status属性，再触发 CSS 类切换（如.node.unhealthy { fill: #d32f2f; }） - 网络断开重连后，先发
{"cmd": "sync", "sinceVersion": lastAppliedVersion}请求补漏，再继续收流
连线加箭头，marker-end 死活不显示？
SVG 箭头不是样式开关，而是依赖三要素：定义、引用、定位。漏掉任一环，marker-end="url(#arrow)" 就只是个无效字符串。
-
<marker></marker>必须放在<defs></defs>内，且<defs></defs>必须是<svg></svg>的直接子元素（不能嵌在<:g>里） -
id="arrow"和url(#arrow)的字符串必须完全一致，包括大小写和空格 -
<marker></marker>必须设refX和refY（推荐refX="10" refY="3"），否则箭头尖不指向线段终点 - 若用
<path></path>画线，记得加fill="none"，否则路径自身填充会盖住箭头
节点太多时，SVG 渲染卡顿，怎么优化？
卡顿通常不是因为节点数，而是因为每次重绘都做重复计算或 DOM 遍历。纯 SVG 在千级节点下仍可流畅，关键在控制更新粒度和避免 layout thrashing。
- 把所有节点和连线用一个
<g id="topology-layer"></g>包裹，缩放/平移只操作这个<g></g>的transform，不逐个改子元素 - 鼠标悬停高亮时，不要循环所有
<line></line>改stroke，改用 CSS 类 +:has()（现代浏览器）或提前建好data-connected-to="svc-api"属性批量选中 - 节点标签文字用
<title></title>而非<text></text>实现 hover 提示，既轻量又支持无障碍 - 真正需要动态文本（如实时 CPU 百分比）时，只渲染视口内节点的
<text></text>，超出区域的用display: none
最易被忽略的点：viewBox 不是可选项，而是坐标系统的基石。没设 viewBox="0 0 800 600"，所有“响应式”“缩放适配”都是空中楼阁；坐标一旦写死像素值，换设备、改容器、加动画，全得推倒重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
