SVG流程图需JavaScript动态计算坐标实现交互，<line>因语义清晰、性能高且属性简洁，比<path>更适合直连；连线需手动计算节点中心偏移，实时更新DOM属性并缓存坐标以避免回流。
直接用 <svg> 标签写死节点和连线，能展示但没法动；真要让流程图可交互、可拖拽、连线自动跟随，必须靠 JavaScript 动态计算坐标并更新 DOM 属性——不是靠 CSS 或声明式写法能解决的。
为什么 <line> 比 <path> 更适合基础流程图连线
多数流程图是直连（如“开始 → 步骤1 → 审批”），<line> 语义清晰、性能高、属性少（就 x1/y1/x2/y2 四个值），浏览器渲染开销远低于 <path>。用 <path d="M...L..."> 写直线反而多一层解析负担，且容易因大小写或空格出错。
- 当连线需箭头时，用
<defs>配合marker-end，不要手动画三角形 -
<line>不支持stroke-dasharray实现虚线流程？支持，但得确保stroke不为none，否则虚线不显示 - IE 已淘汰，不用考虑
xlink:href兼容性，统一用href
节点位置怎么算才不会偏移
SVG 坐标系原点在左上角，而你看到的节点（比如一个 <rect>）的 x/y 是其左上角，不是中心。如果想让连线从节点“中心”出发，得手动加偏移：
- 矩形节点：起点 x =
node.x + node.width / 2，y =node.y + node.height / 2 - 圆形节点：起点 x =
node.cx，y =node.cy（直接可用） - 千万别混用单位——所有坐标必须是数字，不能是
"50px"或"50%"，否则<line>渲染失败 - 如果用了
viewBox（推荐），所有坐标按逻辑单位写，不用管容器实际像素尺寸
连线跟着节点动，关键在 DOM 属性实时更新
拖拽节点时，<line> 不会自动重绘；必须监听 mousemove，然后显式调用 line.setAttribute('x2', newX) 等。常见错误是只改了节点 transform，却忘了同步更新连线端点。
- 把节点和对应连线用相同
id或data-node-id关联，方便 JS 查找 - 避免每帧都
getBoundingClientRect()——它触发回流；优先维护一份坐标缓存对象，拖拽中只更新缓存，松手后再批量刷新 SVG 属性 - 若节点嵌在
<g transform="translate(...)">里，连线坐标得换算成全局 SVG 坐标，别直接取g的transform字符串去解析
最易被忽略的是：连线的起点和终点坐标必须始终落在 SVG 画布内（即 viewBox 定义的范围），超出部分虽不报错但不可见；调试时用 console.log() 打印实时坐标比肉眼对齐靠谱得多。
