是定义箭头模板的元素，需置于中并设id、viewBox、refX、refY；refX指箭头最右端x坐标，refY=0实现垂直居中；orient="auto"使箭头自动旋转；挂载时必须用marker-end="url(#id)"，且路径需有效；markerWidth/Height控制缩放基准，非像素值。
marker-start、marker-end 或 marker-mid 这些属性挂到
怎么定义一个基础箭头 marker
必须放在 id、viewBox、refX 和 refY —— 后两者决定箭头“尖端”对齐路径终点的位置，漏掉或设错会导致箭头飘走或倒置。
-
refX一般设为箭头路径的最右端 x 坐标（比如10） -
refY设为 0 可让箭头垂直居中对齐路径终点 -
orient="auto"让箭头自动沿路径方向旋转；不用它就得手动写角度
为什么箭头没显示？常见挂载错误
即使
- 属性值必须是
url(#id)格式，写成marker-end="arrow"或marker-end="#arrow"都无效 -
x1/y1和x2/y2，不能靠transform移动来“伪造”线段 -
marker-end，其d必须以M开头、以L/C/Z等结束，空路径或只有M不行
marker-width / marker-height 影响什么
这两个属性不是控制箭头本身大小，而是控制“marker 模板在使用时的缩放基准”。它和路径的 stroke-width 无关，但会直接影响箭头渲染尺寸：
复古鱼罐头标签设计矢量模板
下载
复古鱼罐头标签设计矢量模板适用于创建食品包装设计、品牌标识、菜单设计、广告宣传材料、市场营销活动、复古风格网站和移动应用界面、社交媒体内容、印刷品如海报、传单和宣传册、产品目录、礼品包装以及任何需要复古或海洋主题视觉效果等相关视觉场景设计的AI格式素材。
- 设太小（如
markerWidth="2"）会导致箭头糊成一团 - 设太大（如
markerWidth="20"）会让箭头远超预期，尤其在细线上显得突兀 - 推荐从
6～8开始试，配合viewBox内部坐标比例调整
用 path 画复杂箭头比 polygon 更灵活
虽然
- 要带边框的箭头？给
stroke和fill="none" - 要渐变箭头？把
fill换成fill="url(#grad)"，并在 - 要双箭头？同时设
marker-start="url(#arrow)" marker-end="url(#arrow)"
真正容易被忽略的是：refX 和 refY 的单位是“用户坐标系”，不是像素，也不是 markerWidth 的倍数——它们直接对应 viewBox 内部的坐标值，改了 viewBox 就得重算。
