最可控的HTML连线方式是使用<svg>，因其原生支持坐标系和矢量线段，通过<line>标签指定x1、y1、x2、y2即可画直线，并可配合viewBox实现自适应，动态场景需JS实时更新坐标。
用 <svg> 画线最可控
HTML 本身没有“连线”语义标签，直接用 <div> 或 <span> 拼位置容易错位、响应式失效。真正靠谱的方式是嵌入 <svg>，它原生支持坐标系和矢量线段。
关键点：
-
<line>标签只需指定x1、y1、x2、y2四个属性就能画直线 - 所有坐标值单位是像素，但可配合
viewBox实现缩放自适应 - 若连接的是动态元素（比如两个浮动的
<div>），需用 JavaScript 实时读取它们的getBoundingClientRect()并更新<line>属性
<svg width="400" height="200" viewBox="0 0 400 200"> <line x1="50" y1="30" x2="350" y2="170" stroke="#333" stroke-width="2"/> </svg>
用 CSS border 或 transform 连接固定位置元素
如果两个元素位置固定、无需精确角度控制，CSS 更轻量。但要注意：这不是真“连线”，而是视觉模拟。
常见做法：
立即学习“前端免费学习笔记（深入）”；
- 给中间容器加
border-left或border-bottom，模拟垂直/水平连接线 - 用伪元素
::after+transform: rotate()画斜线，但旋转中心默认是元素左上角，需配合transform-origin调整 -
绝对定位的
<div>设为细长块（如width: 2px; height: 80px;），再用top/left手动对齐——仅适合静态布局
JavaScript 动态连线时别漏掉重绘逻辑
当被连接的 DOM 元素会移动、缩放或 DOM 结构变化时，仅靠初始计算一次坐标是不够的。
必须监听并响应：
- 窗口大小变化：
window.addEventListener('resize', updateLine) - 元素尺寸变动：用
ResizeObserver监听目标元素（比轮询高效） - 滚动场景：若元素在滚动容器内，还要监听
scroll事件，并注意getBoundingClientRect()返回的是视口坐标，需转换 - 避免高频触发：对
resize和scroll做节流（如setTimeout防抖）
Canvas 连线适合大量动态线段但不可选中
如果要画上百条线、且每条线都随数据实时变化（比如拓扑图、流程图），<canvas> 性能优于 SVG。但它生成的是位图，线条无法单独绑定事件、不能被 CSS 样式化、也不能被屏幕阅读器识别。
典型用法：
- 用
ctx.beginPath()→ctx.moveTo(x1, y1)→ctx.lineTo(x2, y2)→ctx.stroke() - 每次重绘前必须调用
ctx.clearRect()清空画布，否则旧线残留 - 若需要点击某条线，得自己实现坐标换算+距离判断（SVG 的
<line>支持原生click事件）
真正难的不是画线，而是让线“活”在真实 DOM 生命周期里——位置、缩放、销毁、重连，每个环节漏掉一个，线就断了。
