svg线条精确选择与缩放需确保其为可交互dom节点：用唯一id绑定事件、getbbox()获取包围盒；缩放时仅对组应用transform并反向映射鼠标坐标；svg宽高须设像素值并与宿主div严格同步；拖拽时直接更新x1/y1/x2/y2属性。
要在SVG中实现线条的精确选择与缩放，关键不是“画出来就行”，而是让线条成为可感知、可响应、可变换的DOM节点，并确保坐标系统与用户操作意图严格对齐。
让每条线都可被独立选中
SVG中的<line></line>、<path></path>等元素天然支持事件监听。只要赋予唯一ID或data属性，就能绑定点击、hover、拖拽等交互：
- 给线条加
cursor: pointer样式，视觉上提示可交互 - 用
addEventListener('click', ...)捕获点击，通过event.target精准获取被点中的线条 - 配合
getBBox()方法可快速获取该线条的实际包围盒，用于高亮边框或弹出编辑面板 - 避免在父
<g></g>上统一监听——那样会丢失具体是哪条线被触发
缩放时不偏移、不模糊、不卡顿
直接修改viewBox或CSS scale()看似简单，但会导致坐标错位和性能下降。真正稳定的做法是用transform作用于内容容器：
- 把所有可交互图形（包括线条）统一放入一个
<g></g>组，作为“内容代理” - 缩放时只对该
<g></g>应用transform="scale(s) translate(x,y)"，不改动原始坐标值 - 鼠标位置需实时反向映射：缩放后点击坐标要除以当前scale、再减去偏移量，才能准确定位到原始线条端点
- 启用
will-change: transform可进一步提升GPU加速稳定性
保持坐标系与容器严格同步
线条绘制是否“精确”，取决于SVG坐标系是否与宿主div的可视区域完全一致：
- 宿主
<div>设<code>position: relative，作为定位锚点 - 内部
<svg></svg>设position: absolute; top: 0; left: 0;，宽高与div完全一致 - 务必显式设置
svg.width和svg.height为像素值（如100），而非100%——后者在缩放或flex布局下易失准 - 若div尺寸动态变化，需监听
resize并同步重设svg宽高及内部线条坐标比例 - 记录鼠标按下时的初始偏移（相对于线条起点/终点），后续每次
mousemove按差值更新坐标 - 若支持多点拖拽（如拖动整条线平移），应同时修正两个端点，而非仅改变
transform——否则会破坏后续计算逻辑（比如连线关系、碰撞检测） - 拖拽过程中建议临时禁用缩放，避免坐标换算混乱；释放后再恢复
拖拽移动时保持线条端点跟随鼠标
选中一条线后拖动，本质是实时更新它的x1、y1、x2、y2属性：
