svg的是定义可复用图形模板的元素，须置于中并设置id、viewbox、refx、refy等参数；真正显示靠marker-start/marker-end/marker-mid挂载，且值必须为url(#id)格式，路径需有效，refx/refy决定锚点对齐位置，orient="auto"实现自动旋转。
SVG 的 <marker></marker> 不是“画出箭头”的元素，而是定义一个可复用的图形模板；真正让它出现在线上，靠的是 marker-start、marker-end 或 marker-mid 这些挂载属性。关键不在“怎么画”，而在“怎么对齐”和“怎么复用”。
必须放在 里，且带完整定位参数
<marker></marker> 只能定义在 <defs></defs> 中，否则不会被识别。它本身不渲染，只提供模板。定义时至少要包含：
-
id：唯一标识，后续通过
url(#id)引用 -
viewBox：内部坐标系范围，比如
"0 0 10 10"，决定你画的图形缩放基准 -
refX / refY：模板内“锚点”位置，这个点会精确贴合到线段端点上。箭头尖端通常设为
refX="10" refY="0"（假设路径最右 x=10） - markerWidth / markerHeight：控制模板在使用时的渲染尺寸，不是图形本身大小。建议从 6～8 开始试，太小易糊，太大失衡
- orient="auto"：让箭头自动朝向线段方向，省去手动算角度
挂载箭头：三类属性各司其职
把定义好的 marker 挂到图形上，靠三个属性，但生效条件不同：
-
marker-start：作用于路径起点或线段起点，<line></line>和<path></path>都支持 -
marker-end：作用于终点，最常用，比如单向箭头 -
marker-mid：仅在<polyline></polyline>或含多个折点的<path></path>（如M0,0 L50,20 L100,0）中，对中间顶点生效；对普通<line></line>或单段<path></path>无效
注意：属性值必须是 url(#id) 格式，写成 marker-end="arrow" 或 marker-end="#arrow" 都不会显示。
支持多种图形：箭头、圆点、菱形都能做
marker 内部可以放任意 SVG 图形，不限于 <path></path>：
- 画实心箭头：
<path d="M0,0 L10,5 L10,-5 Z" fill="#000"></path> - 画空心箭头：加
stroke="#333" fill="none" - 画小圆点：
<circle cx="5" cy="5" r="3" fill="#000"></circle>，设refX="5" refY="5" - 画菱形：
<polygon points="5,0 10,5 5,10 0,5" fill="#000"></polygon>
所有图形都需配合正确的 refX/refY 对齐端点，否则会偏移或倒置。
常见失效原因与排查要点
即使 marker 定义正确，也常因挂载方式出错而看不到箭头：
-
<line></line>必须有明确的x1/y1和x2/y2，不能靠transform移动来“模拟”线段 -
<path></path>要触发marker-end，d 属性必须是有效路径：以M开头，以L、C、Z等结束；只有M或空字符串不行 -
markerUnits默认是strokeWidth，即箭头大小随线宽缩放；若想固定尺寸，改用userSpaceOnUse - 检查浏览器控制台是否有 SVG 解析错误，比如 id 重复、标签未闭合等基础语法问题
