SVG : 多邊形
(僅列出部分有使用到的屬性)
範例1
<svg height="210" width="500">
<polygon points="200,200 400,200 300,50" fill="rgb(255, 183, 197)"
stroke="black" stroke-width="2" />
</svg>
範例2
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 183, 197)"
stroke="black" stroke-width="2" fill-rule="nonzero" />
</svg>
範例3
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 183, 197)"
stroke="black" stroke-width="2" fill-rule="evenodd" />
</svg>
fill-rule
當構成多邊形的點所形成的路徑有所重疊，就需要特別指定要填滿的區域，並將圖形拆分成內外區域，圖形內填滿、圖形外則不填滿，而fill-rule這個屬性就是用來指定如何區分圖形內、外區域，可使用的屬性值共有2個，分別是nonzero和evenodd。
上面的範例2、3正是使用不同的圖形內、外區域判斷方法，所以造成截然不同的結果。
nonzero
起始值為0，在區域內任取一點並畫出一條無限長的射線(如下圖)，若路徑方向和射線方向形成的是順時針方向则+1，反之逆時針方向则-1，最後如果數值是0，則判斷該區域為圖形外部(不填充)；如果不是0，則判斷為圖形内部(填充)。下圖區域內藍點所發出的射線與路徑2、5相交，並且射線與路徑所形成的方向均為順時針，所以數值總和為2(非0)，也因此藍點所在區域被歸類在圖形內部，會被填入顏色。
evenodd
起始值為0，在區域內任取一點並畫出一條無限長的射線(如下圖)，射線每和一條路徑相交，就將數值+1，最後根據數值作出不同判斷，若數值為奇數，則判斷區域位於圖形内部(填充)；若數值為偶数，則判斷區域位於圖形外部(不填充)。下圖區域內藍點所發出的射線恰經過2條路徑(數值總和為2，偶數)，故藍點所在區域被歸類在圖形外部，不會被填入顏色。備註 : 圖形外部指的是不被包含在完整圖形的區域(不須被填充上色)。
SVG : 折線
折線與之前畫過的線段有些許不同 :
1. 折線可由複數點連線而成，但線段(Line)只有起始點和終點。2. 折線有fill相關屬性，但線段沒有。
(僅列出部分有使用到的屬性)
範例1
<svg height="210" width="500">
<polyline points="80,10 120,10 120,40 150,40 150,80 200,80"
stroke="black" stroke-width="3" fill="white" stroke-opacity="0.5" />
</svg>
範例2
<svg height="210" width="500">
<polyline points="80,10 120,10 120,40 150,40 150,80 200,80"
stroke="black" stroke-width="3" fill="yellow"
fill-opacity="0.5" stroke-opacity="0.5" />
</svg>
備註 : 折線的顏色填充範圍(圖形)為折線本身加上起始點、終點連線所構成的區域。
參考資料
