SVG的标签怎么用 创建箭头-XML/RSS教程

是定义箭头模板的元素，需置于中并设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> 定义正确，挂载方式不对也白搭。注意以下三点：