如何通过HTML的SVG的marker元素给线段端点添加箭头等标记图形

marker 必须嵌套在<defs>中且通过marker-start/marker-end引用，refX/refY需匹配箭头尖端坐标，orient="auto"实现自动转向，url(#id)语法不可省略引号和括号。

marker 不是直接画箭头的元素，它只是定义一个可复用的“模板”，真正生效靠的是 marker-start、marker-end 这类挂载属性。漏掉 <defs>、设错 refX/refY 或忘记写 url(#id)，箭头就完全不显示。

必须把 marker 放进 <defs> 里

SVG 渲染器会跳过 <defs> 内部内容，只把它当资源存起来。一旦把 marker 写在 <defs> 外面（比如直接塞在 <svg> 根下），它会被当成普通图形渲染——但因为没指定位置和尺寸，通常不可见，且无法被引用。

• marker 必须嵌套在 <defs> 中，且该 <defs> 需在同级或父级 <svg> 内
• 多个 marker 可共存于一个 <defs>，只要 id 不重复
• React/Vue 等框架中动态生成时，注意 <defs> 要提前 mount，不能靠条件渲染控制显隐

refX 和 refY 决定箭头“尖端”是否对齐端点

这两个值不是像素坐标，而是相对于 viewBox 的逻辑坐标。设错会导致箭头飘在空中、倒置、或整个偏移出视野。

• 对标准右向箭头（如 d="M0,0 L10,5 L0,10 Z"），refX 应取尖端 x 坐标（通常是 0 或 10），refY 取尖端 y 坐标（通常是 5）
• 常见错误：把 refX="10" 用在左向箭头（d="M10,0 L0,5 L10,10"）上，结果箭头反着贴在起点左侧
• refY="0" 并不总等于“顶部对齐”——它取决于你 path 的 y 范围和 viewBox 设置

orient="auto" 才能让箭头自动转向，否则默认朝右

不加 orient 属性，或设为固定角度（如 orient="90"），箭头方向就锁死了。哪怕线段是垂直或斜向的，它也不会旋转。

立即学习“前端免费学习笔记（深入）”；

• orient="auto" 是最常用值，表示根据路径终点切线方向自动旋转
• orient="auto-start-reverse" 适合起点箭头，会在起点处反向对齐（例如双向箭头的起始端）
• 如果用 markerUnits="strokeWidth"，markerWidth/markerHeight 会随线宽缩放；用 "userSpaceOnUse" 则保持绝对尺寸

marker-end="url(#id)" 的写法不能省略引号和 url()

这是最容易被忽略的语法细节。写成 marker-end="#id" 或 marker-end="id" 都无效，浏览器不会报错，但箭头就是不出现。

• 必须完整写成 marker-end="url(#arrow)"，括号和引号缺一不可
• ID 名称区分大小写，url(#Arrow) 和 url(#arrow) 是两个不同引用
• 只支持挂载到 <line>、<path>、<polyline>、<polygon> 上；<rect>、<circle> 不支持

复杂点在于 marker 内部的 path 形状和 viewBox 的配合——哪怕 refX/refY 对了，如果 path 超出 viewBox 范围，也会被裁剪。建议先用固定尺寸（如 viewBox="0 0 10 10"）调试，再按需调整缩放逻辑。