因旋转中心默认为左上角且未校准坐标系，需设transform-origin: 50% 50%、用math.hypot和math.atan2计算长度与角度、锚点定位中点、监听resizeobserver并统一父容器坐标系，否则连线必偏移。
用 transform: rotate() 画斜线时，为什么总是偏移、不准、对不齐？
因为旋转中心默认是元素左上角，不是中点；而且线条长度和角度必须严格匹配两点间距离与夹角，不能靠“差不多”。
-
transform-origin必须设为50% 50%，否则旋转后端点会漂移 - 线条高度（或宽度）得等于两点欧氏距离：
Math.hypot(dx, dy)，不能只用height硬调 - 旋转角度要用
Math.atan2(dy, dx)（单位是弧度），再转成deg；用tan⁻¹(dy/dx)会丢象限信息，导致左半边连线全翻车 - 绝对定位的
top/left应该锚定在线条中点，而不是起点——否则transform-origin: 50% 50%才有意义
如何让连线自动跟随两个 DOM 节点的位置变化？
靠手动写死坐标肯定不行，得监听节点 getBoundingClientRect() 并重算。但别在每次 resize 或 scroll 里直接重绘——性能爆炸。
- 用
ResizeObserver监听两个节点尺寸变化（比如拖拽、展开折叠） - 用
IntersectionObserver不合适，它不报位置；scroll事件要节流，建议用requestAnimationFrame批量更新 - 连线元素必须和被连节点在同一
position: relative父容器下，否则getBoundingClientRect()的坐标系不统一，相减结果无效 - 示例关键逻辑：
const rectA = nodeA.getBoundingClientRect();<br>const rectB = nodeB.getBoundingClientRect();<br>const x1 = rectA.left + rectA.width / 2 - containerRect.left;<br>const y1 = rectA.top + rectA.height / 2 - containerRect.top;
注意减去容器的containerRect偏移，才能转成相对定位值
连线穿模、被其他元素遮挡怎么办？
不是 z-index 越高越好。如果节点本身有 transform、opacity 或 <code>will-change，会创建新的层叠上下文，导致 z-index 失效。
- 确保连线和两个节点在同一个层叠上下文中：父容器设
z-index: 0（或 auto），不要在中间某层加 transform - 连线元素自身设
position: absolute+z-index: 1，但它的父容器不能是transform: translateZ(0)这类隐式创建新层叠上下文的属性 - 如果节点用了
backdrop-filter或clip-path，它们也会截断子元素渲染——此时连线必须提级到更外层容器中，不能放在任一节点内部
SVG 方案比 CSS 绝对定位更稳吗？
是，但代价是放弃纯 CSS 控制。SVG 的 <line></line> 天然支持端点坐标，没有旋转中心、transform-origin、层叠上下文这些干扰项。
- CSS 方案适合简单静态连线、节点数少、不频繁重绘的场景；一旦涉及缩放、zoom、高 DPI 屏幕，CSS 线条边缘容易发虚或错位
- SVG 中用
<line x1="..." y1="..." x2="..." y2="..."></line>，坐标直传，无转换误差；配合vector-effect: non-scaling-stroke可避免缩放时线条变粗 - 但 SVG 需要 JS 动态写入属性，无法用纯 CSS 媒体查询控制颜色/粗细；如果项目已重度依赖 CSS-in-JS 或 Tailwind，混入 SVG 会增加维护裂痕
跨容器连线真正的难点不在怎么画线，而在「坐标系统对齐」和「层叠上下文穿透」——这两处出问题，调十小时 rotate 角度都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
