SVG marker 怎样让端点图形沿路径方向旋转

SVG marker 端点图形要沿路径方向旋转，核心不是给箭头单独写一组 transform，而是在定义 marker 时使用 orient="auto"。浏览器会根据它被挂载的 path、line、polyline 或 polygon 的局部方向调整 marker；如果起点和终点都需要箭头，则改用 orient="auto-start-reverse"。

官方地址：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/marker

生产中优先把方向交给 orient，再用 viewBox、refX/refY 校准图形坐标。这样路径换成曲线或改变方向时，不需要同步改写每个箭头的旋转角度。

先把路径、端点和 marker 的职责分开

marker 是放在 defs 中复用的图形定义，真正决定它出现在哪里的是宿主图形上的 marker-start、marker-mid 和 marker-end。因此，端点方向首先来自宿主路径，而不是来自 marker 内部的三角形朝向。

一张流程线可以只定义一个箭头 marker，然后把它引用到多条线或曲线上。这样做的好处是发布时只维护一份箭头形状、尺寸和锚点配置，避免某条线使用了不同的旋转基准。需要特别留意：marker-mid 会按路径的局部方向放到中间顶点，折线转角多时，视觉上可能比单纯的终点箭头更密集。

用 orient=auto 让箭头跟随路径方向

下面的最小写法同时展示直线和曲线。viewBox="0 0 10 10" 建立 marker 内部坐标系，三角形的尖端放在右侧；refX="8" 把这个尖端作为接近宿主路径端点的参考位置。orient="auto" 会让右向三角形顺着每条宿主路径的末端方向旋转。

这段代码里的 currentColor 让 marker 继承宿主图形的当前文字颜色，适合主题色切换；如果项目需要固定颜色，可以直接使用明确的填充色。方向问题和颜色问题应分开排查，不要为了修正箭头朝向而反复调整颜色或路径坐标。

双向路径使用 auto-start-reverse，固定角度只留给特殊图例

当同一个 marker 同时挂到 marker-start 和 marker-end 时，起点需要面对路径的反向方向。orient="auto-start-reverse" 会在起点自动反转，在终点保持路径前进方向，适合双向连线、尺寸标注和有向关系图。

只有当图例要求箭头始终保持固定屏幕角度时，才使用 orient="45" 这类固定角度。固定角度不会理解宿主路径的转向，把它用于普通流程线通常会造成曲线末端箭头朝向错误。

用 refX、refY 和 markerUnits 做生产级校准

方向正确但箭头看起来“悬空”或“插进线里”，通常是参考点没有对准。refX、refY 指定 marker 内部哪个坐标落在宿主路径的挂载点；它们应配合 viewBox 中三角形的尖端或中心来设定。先确定图形尖端，再调整参考点，比在宿主路径上增加额外偏移更稳定。

markerUnits="strokeWidth" 会让 marker 尺寸随宿主描边宽度缩放，适合线宽和箭头需要保持比例的图；markerUnits="userSpaceOnUse" 则使用 SVG 用户坐标，适合需要固定几何尺寸的地图符号或标注。markerWidth 与 markerHeight 是 marker 视口大小，不等于三角形本身的可见宽度，留出合适的 viewBox 空间能减少裁切。

发布前按三条边界检查

第一，确认方向属性写在 marker 上，宿主图形只负责引用；第二，确认三角形尖端、refX/refY 和 viewBox 使用同一套内部坐标；第三，确认线宽变化是否应该带动箭头变化，再决定 strokeWidth 还是 userSpaceOnUse。

如果箭头在终点朝反方向，先检查路径数据的方向，再检查 orient；如果箭头方向正确但位置偏移，检查 refX/refY；如果不同线宽下箭头比例不一致，检查 markerUnits。这种分层排查比给每条路径单独写旋转矩阵更容易维护。

结论与常见问题

SVG marker 沿路径方向旋转的首选配置是 orient="auto"；起点和终点都要有方向相反的箭头时使用 auto-start-reverse。完成方向后，再用 refX/refY 校准落点，用 markerUnits 决定尺寸是否随描边缩放。固定角度只适合不依赖宿主路径方向的特殊图例。

为什么 marker-end 的箭头没有跟着曲线转？

常见原因是使用了固定角度，或把旋转写在宿主路径的其他变换上。先把 marker 的 orient 改为 auto，再确认曲线末端确实有 marker-end 引用。

auto 和 auto-start-reverse 应该怎么选？

只有终点箭头时使用 auto；同一个 marker 同时用于起点和终点，并且希望起点自动反向时使用 auto-start-reverse。它们解决的是挂载方向，不是图形尺寸问题。

箭头尖端与线端重合不了怎么办？

先检查 marker 内三角形的尖端坐标，再调整 refX；不要优先修改宿主路径的终点坐标。若出现裁切，再扩大 viewBox 或 marker 视口。