最可控的HTML连线方式是使用，因其原生支持坐标系和矢量线段，通过标签指定x1、y1、x2、y2即可画直线，并可配合viewBox实现自适应，动态场景需JS实时更新坐标。

用 <svg></svg> 画线最可控

HTML 本身没有“连线”语义标签，直接用 <div> 或 <code><span></span> 拼位置容易错位、响应式失效。真正靠谱的方式是嵌入 <svg></svg>，它原生支持坐标系和矢量线段。

关键点：

• <line></line> 标签只需指定 x1、y1、x2、y2 四个属性就能画直线
• 所有坐标值单位是像素，但可配合 viewBox 实现缩放自适应
• 若连接的是动态元素（比如两个浮动的 <div>），需用 JavaScript 实时读取它们的 <code>getBoundingClientRect() 并更新 <line></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> 设为细长块（如 <code>width: 2px; height: 80px;），再用 top/left 手动对齐——仅适合静态布局

    JavaScript 动态连线时别漏掉重绘逻辑

    当被连接的 DOM 元素会移动、缩放或 DOM 结构变化时，仅靠初始计算一次坐标是不够的。

    

    java-api-doc-generator

    分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

    下载

    必须监听并响应：

    • 窗口大小变化：window.addEventListener('resize', updateLine)
    • 元素尺寸变动：用 ResizeObserver 监听目标元素（比轮询高效）
    • 滚动场景：若元素在滚动容器内，还要监听 scroll 事件，并注意 getBoundingClientRect() 返回的是视口坐标，需转换
    • 避免高频触发：对 resize 和 scroll 做节流（如 setTimeout 防抖）

    Canvas 连线适合大量动态线段但不可选中

    如果要画上百条线、且每条线都随数据实时变化（比如拓扑图、流程图），<canvas></canvas> 性能优于 SVG。但它生成的是位图，线条无法单独绑定事件、不能被 CSS 样式化、也不能被屏幕阅读器识别。

    典型用法：

    • 用 ctx.beginPath() → ctx.moveTo(x1, y1) → ctx.lineTo(x2, y2) → ctx.stroke()
    • 每次重绘前必须调用 ctx.clearRect() 清空画布，否则旧线残留
    • 若需要点击某条线，得自己实现坐标换算+距离判断（SVG 的 <line></line> 支持原生 click 事件）

    真正难的不是画线，而是让线“活”在真实 DOM 生命周期里——位置、缩放、销毁、重连，每个环节漏掉一个，线就断了。