如果我想給一條路徑的兩個端點加上箭頭（三角形），或者小圓點，菱形等標記應該怎么做呢？
在線DOME預覽
標記是markerSVG中一個比較重要的概念，它能貼附于<path>、<line>、<polyline>、<polygon>元素上。最常用的應用就是給線段添加箭頭。標記寫在 defs中可用于定義可重復利用的圖形元素。
??標記 marker的各屬性和意義:
????viewBox: 坐標系的區(qū)域
????refX,refY: 在viewBox內的基準點，繪制時此點在要貼附的直線端點上
???? markerUnits: 標記大小的基準，有兩個值，即strokeWidth(線的寬度)和uesrSpaceOnUse(線前端的大小)
????markerWidth,markerHeight:標記的大小。
????orient: 繪制的方向，可設為auto(自動確認方向)和角度值
???? id: 標識的id號
??設置位置的屬性如下：
????marker-start: 路徑的起點處
????marker-mid: 路徑的中間端點處(直線只有起點和終點，所以對直線無用)
????marker-end: 路徑的終點處
大家請看下面的例子：
<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);
"
/>
在內聯(lián)樣式表style中，
marker-start指定路徑的起點所采用的路標，url(#markerCircle)對應著前面那個id=markerCircle的路標
marker-end指定路徑的終點所采用的路標，url(#markerArrow)對應著前面那個id=markerArrow的路標
除了可以通過marker-start來指定路徑起點的路標樣式，marker-end來指定路徑終點的路標樣式外，還可以
通過marker-mid屬性來指定路徑中間所有節(jié)點的路標樣式。例子如下：
<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指定終點路標為箭頭。
