SVG路标（marker）

也许有的同学会问，如果我想给一条路径的两个端点加上箭头（三角形），或者小圆点，菱形等路标应该怎么做呢？

大家请看下面的例子：

<html>
<head>
  
</head>
<body>
  <svg>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx="5" cy="5" r="3" style="stroke: none; fill:black;"/>
    </marker>

    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
    </marker>
</defs>

<path d="M100,10 L150,10 L150,60"
      style="stroke: green; stroke- 1px; fill: none;
                   marker-start: url(#markerCircle);
                   marker-end: url(#markerArrow);
                 "

        />
  </svg>
</body>
</html>

在<defs></defs> 中需要路标的尺寸和形状定义好，例如，下面的代码是定义一个圆形路标：

 <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx="5" cy="5" r="3" style="stroke: none; fill:black;"/>
    </marker>

<marker>代表路标，id为改路标的标识，

markerWidth和markerHeight为路标所在视窗坐标系的横轴与纵轴最大的刻度值。

视窗坐标系的原点在屏幕左上角，横轴正方向向右，纵轴正方向向下。

在SVG中需要在一个矩形视窗坐标系(viewport)中画路标，视窗坐标系的原点在屏幕左上角。

refX和refY定义将视窗中的哪个点作为锚点（在上面的例子以圆心为锚点）来挂在线段的端点上，如下图

下面的代码是画一个箭头作为锚点

 <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
           orient="auto">
        <path d="M2,2 L2,11 L10,6 L2,2" style="fill: black;" />
    </marker>

示意图如下

在上面的代码中orient="auto"是指箭头方向随着路径的方向而自动变化

orient的值也可以用户自己定义

在<defs>里定义好路标后，我们就可以在路径的起点和终点把路标加上，代码如下：

<path d="M100,10 L150,10 L150,60"
      style="stroke: green; stroke- 1px; fill: none;
                   marker-start: url(#markerCircle);
                   marker-end: url(#markerArrow);
                 "

        />

在内联样式表style中，

marker-start指定路径的起点所采用的路标，url(#markerCircle)对应着前面那个id=markerCircle的路标

marker-end指定路径的终点所采用的路标，url(#markerArrow)对应着前面那个id=markerArrow的路标

除了可以通过marker-start来指定路径起点的路标样式，marker-end来指定路径终点的路标样式外，还可以

通过marker-mid属性来指定路径中间所有节点的路标样式。例子如下：

<SVG>
  <defs>
  <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
          orient="auto">
      <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:black;"/>
  </marker>

  <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7"
          orient="auto">
      <path d="M2,2 L2,13 L8,7 L2,2" style="fill: black;" />
  </marker>
</defs>

<path d="M100,20 l50,0 l0,50 l50,0"
      style="stroke: blue; stroke- 1px; fill: none;
                   marker-start: url(#markerSquare);
                   marker-mid: url(#markerSquare);
                   marker-end: url(#markerArrow);

                 "
        />
  </SVG>

在这段代码中首先在<defs>元素里面画出两个路标，一个是正方形(markerSquare)，另一个是箭头(markerArrow)

然后在path中marker-start指定开始路标为矩形，marker-mid指定中间路标为矩形，marker-end指定终点路标为箭头。