SVG marker为线段端点添加箭头等标记

给SVG线段添加箭头标记，听起来简单，但实际开发中新手容易踩坑。关键在于正确理解marker元素——它本质上不是一个“绘图”指令，而是一个“模板”定义。

简单来说，marker本身不会直接绘制任何图形。需要先在中定义箭头模板，再通过marker-start、marker-end等属性将其“挂载”到具体的线段元素上。整个过程中，漏掉、设置错误的refX/refY或写错引用语法，都会导致箭头无法显示。

必须将 marker 放入 中

这是第一个关键点。在SVG中相当于资源仓库，内部元素不会被直接渲染到画布上，仅用于存储以备引用。如果将marker直接写在根标签下，它会被当作普通图形元素处理，但由于未指定位置和尺寸，通常不可见，也无法通过ID引用。

• 记住一条铁律：marker必须嵌套在内部，且该需位于同一个或其父级中。
• 一个内可包含多个marker，只需保证它们的id属性不重复。
• 在React、Vue等框架中动态生成SVG时，必须提前挂载到DOM中，不能依赖条件渲染控制显示隐藏，否则引用它的线段会找不到模板。

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

这两个属性是精确定位的关键，但它们不是绝对的像素坐标，而是相对于marker自身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"并不总是代表“顶部对齐”，最终效果取决于marker内部path的y坐标范围和viewBox设置。

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

如果不给marker添加orient属性，或设为固定角度（如orient="90"），箭头方向会被锁定。此时无论线段是垂直、斜向还是其他方向，箭头都不会自动旋转贴合线段。

• orient="auto"是最常用的值，表示箭头会根据所挂载路径的终点切线方向自动旋转。
• orient="auto-start-reverse"适用于线段起点的箭头，会在起点处反向对齐，常用于绘制双向箭头。
• 关联属性markerUnits：若设为"strokeWidth"，则markerWidth和markerHeight会随线段宽度（stroke-width）等比例缩放；若设为"userSpaceOnUse"，则marker尺寸固定，不随线宽变化。

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

这是语法上最容易忽略的地方。写成marker-end="#id"或marker-end="id"均无效，浏览器通常不报错，但箭头显示不出来。

• 正确引用格式必须完整：marker-end="url(#arrow)"，引号和url()函数缺一不可。
• ID区分大小写，因此url(#Arrow)和url(#arrow)引用的是不同的marker。
• 目前marker-*属性仅支持挂载到、、、这些描述路径或线条的元素上，、等基础形状元素不支持。

实际使用中更复杂的部分在于marker内部path形状与viewBox的配合。即便refX和refY设置正确，如果path的绘制区域超出viewBox定义范围，超出的部分会被裁剪，导致箭头显示不完整。调试时建议先用固定的、能完整包裹箭头图形的viewBox（例如viewBox="0 0 10 10"）测试，确保箭头正常显示后，再根据实际需求调整缩放逻辑和尺寸。