marker 必须嵌套在中且通过marker-start/marker-end引用，refx/refy需匹配箭头尖端坐标，orient="auto"实现自动转向，url(#id)语法不可省略引号和括号。
marker 不是直接画箭头的元素，它只是定义一个可复用的“模板”，真正生效靠的是 marker-start、marker-end 这类挂载属性。漏掉 <defs></defs>、设错 refX/refY 或忘记写 url(#id)，箭头就完全不显示。
必须把 marker 放进 <defs></defs> 里
SVG 渲染器会跳过 <defs></defs> 内部内容，只把它当资源存起来。一旦把 marker 写在 <defs></defs> 外面（比如直接塞在 <svg></svg> 根下），它会被当成普通图形渲染——但因为没指定位置和尺寸，通常不可见，且无法被引用。
-
marker必须嵌套在<defs></defs>中，且该<defs></defs>需在同级或父级<svg></svg>内 - 多个
marker可共存于一个<defs></defs>，只要id不重复 - React/Vue 等框架中动态生成时，注意
<defs></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></line>、<path></path>、<polyline></polyline>、<polygon></polygon>上；<rect></rect>、<circle></circle>不支持
复杂点在于 marker 内部的 path 形状和 viewBox 的配合——哪怕 refX/refY 对了，如果 path 超出 viewBox 范围，也会被裁剪。建议先用固定尺寸（如 viewBox="0 0 10 10"）调试，再按需调整缩放逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
