如果我想給一條路徑的兩個端點加上箭頭（三角形），或者小圓點损谦，菱形等標(biāo)記應(yīng)該怎么做呢岖免？
在線DOME預(yù)覽
標(biāo)記是markerSVG中一個比較重要的概念岳颇，它能貼附于<path>、<line>颅湘、<polyline>话侧、<polygon>元素上。最常用的應(yīng)用就是給線段添加箭頭闯参。標(biāo)記寫在 defs中可用于定義可重復(fù)利用的圖形元素瞻鹏。
??標(biāo)記 marker的各屬性和意義:
????viewBox: 坐標(biāo)系的區(qū)域
????refX,refY: 在viewBox內(nèi)的基準(zhǔn)點，繪制時此點在要貼附的直線端點上
???? markerUnits: 標(biāo)記大小的基準(zhǔn)鹿寨，有兩個值新博，即strokeWidth(線的寬度)和uesrSpaceOnUse(線前端的大小)
????markerWidth,markerHeight:標(biāo)記的大小。
????orient: 繪制的方向脚草，可設(shè)為auto(自動確認方向)和角度值
???? id: 標(biāo)識的id號
??設(shè)置位置的屬性如下：
????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> 中需要路標(biāo)的尺寸和形狀定義好，例如馏慨，下面的代碼是定義一個圓形路標(biāo)：
<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>代表路標(biāo)埂淮，id為改路標(biāo)的標(biāo)識，
markerWidth和markerHeight為路標(biāo)所在視窗坐標(biāo)系的橫軸與縱軸最大的刻度值熏纯。
視窗坐標(biāo)系的原點在屏幕左上角同诫，橫軸正方向向右粤策，縱軸正方向向下樟澜。
在SVG中需要在一個矩形視窗坐標(biāo)系(viewport)中畫路標(biāo)，視窗坐標(biāo)系的原點在屏幕左上角叮盘。
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>里定義好路標(biāo)后，我們就可以在路徑的起點和終點把路標(biāo)加上柔吼，代碼如下：
<path d="M100,10 L150,10 L150,60"
style="stroke: green; stroke-width: 1px; fill: none;
marker-start: url(#markerCircle);
marker-end: url(#markerArrow);
"
/>
在內(nèi)聯(lián)樣式表style中毒费，
marker-start指定路徑的起點所采用的路標(biāo)，url(#markerCircle)對應(yīng)著前面那個id=markerCircle的路標(biāo)
marker-end指定路徑的終點所采用的路標(biāo)愈魏，url(#markerArrow)對應(yīng)著前面那個id=markerArrow的路標(biāo)
除了可以通過marker-start來指定路徑起點的路標(biāo)樣式觅玻，marker-end來指定路徑終點的路標(biāo)樣式外，還可以
通過marker-mid屬性來指定路徑中間所有節(jié)點的路標(biāo)樣式培漏。例子如下：
<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>元素里面畫出兩個路標(biāo)溪厘，一個是正方形(markerSquare)，另一個是箭頭(markerArrow)
然后在path中marker-start指定開始路標(biāo)為矩形牌柄，marker-mid指定中間路標(biāo)為矩形畸悬，marker-end指定終點路標(biāo)為箭頭。
