在 svg 中绘制箭头

在svg 中使用marker定义箭头元素，该元素可以镶嵌在defs元素中，实现箭头元素的复用。该元素可使用以下通用属性：

• class

• style

• externalResourcesRequired

• viewBox

• preserveAspectRatio

• transform

拥有以下专用属性：

• markerUnits

• refX

• refY

• markerWidth

• markerHeight

• orient

其中refx，refy 表示箭头的相对起始坐标，refx一般定义为0，refy定义为viewport渲染宽度的一半，markerWidth、markerHeight表示viewport渲染宽度和长度，一般的是viewport长、宽的一半；

箭头定义示例：

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <defs>
    <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="10"
        markerWidth="10" markerHeight="10" orient="auto">
      <path d="M 0 0 L 20 10 L 0 20 z" />
    </marker>
  </defs>

  <polyline points="10,90 50,80 90,20" fill="none" stroke="black" 
      stroke-width="2" marker-end="url(#Triangle)" />
</svg>

备注：对采用marker-end属性引用箭头，箭头将出现在线段的末端