SVG的标签怎么用 创建箭头

是定义箭头模板的元素，需置于中并设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 无关，但会直接影响箭头渲染尺寸：

• 设太小（如 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 就得重算。