也許有的同學會問，如果我想給一條路徑的兩個端點加上箭頭（三角形），或者小圓點，菱形等路標應該怎么做呢？
大家請看下面的例子：
<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-width: 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-width: 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-width: 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指定終點路標為箭頭。
