是定义箭头模板的元素，需置于中并设id、viewBox、refX、refY；refX指箭头最右端x坐标，refY=0实现垂直居中；orient="auto"使箭头自动旋转；挂载时必须用marker-end="url(#id)"，且路径需有效；markerWidth/Height控制缩放基准，非像素值。
<marker></marker> 本身不画箭头，它只是定义一个可复用的图形“模板”，真正显示箭头得靠 marker-start、marker-end 或 marker-mid 这些属性挂到 <line></line>、<path></path> 等元素上。
怎么定义一个基础箭头 marker
必须放在 <defs></defs> 里，且需指定 id、viewBox、refX 和 refY —— 后两者决定箭头“尖端”对齐路径终点的位置，漏掉或设错会导致箭头飘走或倒置。
-
refX一般设为箭头路径的最右端 x 坐标（比如<path d="M0,0 L10,5 L10,-5 Z"></path>中最右是10） -
refY设为 0 可让箭头垂直居中对齐路径终点 -
orient="auto"让箭头自动沿路径方向旋转；不用它就得手动写角度
<svg width="200" height="100">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="10" refY="0" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L10,-5 Z" fill="#000"/>
</marker>
</defs>
<line x1="20" y1="50" x2="180" y2="50" stroke="#000" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
为什么箭头没显示？常见挂载错误
即使 <marker></marker> 定义正确，挂载方式不对也白搭。注意以下三点：
- 属性值必须是
url(#id)格式，写成marker-end="arrow"或marker-end="#arrow"都无效 -
<line></line>必须有明确的x1/y1和x2/y2，不能靠transform移动来“伪造”线段 -
<path></path>要想触发marker-end，其d必须以M开头、以L/C/Z等结束，空路径或只有M不行
marker-width / marker-height 影响什么
这两个属性不是控制箭头本身大小，而是控制“marker 模板在使用时的缩放基准”。它和路径的 stroke-width 无关，但会直接影响箭头渲染尺寸：
- 设太小（如
markerWidth="2"）会导致箭头糊成一团 - 设太大（如
markerWidth="20"）会让箭头远超预期，尤其在细线上显得突兀 - 推荐从
6～8开始试，配合viewBox内部坐标比例调整
用 path 画复杂箭头比 polygon 更灵活
虽然 <polygon points="..."></polygon> 写三角形更短，但 <path></path> 支持贝塞尔曲线、圆弧、甚至带描边/渐变的箭头：
- 要带边框的箭头？给
<path></path>加stroke和fill="none" - 要渐变箭头？把
fill换成fill="url(#grad)"，并在<defs></defs>里定义<lineargradient></lineargradient> - 要双箭头？同时设
marker-start="url(#arrow)" marker-end="url(#arrow)"
真正容易被忽略的是：refX 和 refY 的单位是“用户坐标系”，不是像素，也不是 markerWidth 的倍数——它们直接对应 viewBox 内部的坐标值，改了 viewBox 就得重算。
