先上程式碼

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">
  <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:red;stroke:black;stroke-width:1;fill-rule:nonzero"/>
</svg>

畫出來是這樣的

把fill-rule改成evenodd後，是這樣的

先看看官方文件裡面fill-rule兩個屬性的解釋，

nonzero—這個規則通過從canvas上的某個點往任一方向繪製射線到無窮遠，然後檢查圖形的線段和射線相交的點，來確定“內部區域”。從

evenodd—這個規則通過從canvas上某個點往任一方向繪製射線到無窮遠，然後計算給定圖形上線段路徑和該射線交叉點的數量。如果這個數是奇數，那麼該點在圖形內部；如果是偶數，該點在圖形外部。

一看兩幅圖，你可能會有兩個疑問，這些線段的箭頭是什麼？兩組圖形的第三幅圖為什麼是一樣的？其實這些線段的方向是由我們給出的座標的順序決定的，points="100,0 160,180 10,60 190,60 40,180"，起始點是最上方的點，然後是右下，最左邊，最右邊，再到左下。把這些點按順序連起來就變成了五角星。

先在圖上隨機取幾個點，藍色射線的起始點就是隨機的點，射線1,2,3,4穿過的圖形線段數分別是1,2,3,4，如圖

先看nozero時，怎麼判斷點是否在內部區域。射線1和圖形線段只有一個交點，為從左到右，所以結果是1，判定為內部區域；射線2有兩個交點，都是從左到右，結果是2，內部區域；射線3有三個交點，兩個從左到右，一個從右到左，結果是1，內部區域；射線4有四個交點，兩個從左到右，兩個從右到左，結果是0，所以是外部區域。

evenodd時，只判斷交點個數，所以1,3都是內部區域，2，4都是外部區域。

結果就很清楚啦，那兩組圖的第三個圖為什麼是一樣的，也一目瞭然啦，在圓環內的點，與圖形線段的交點有兩個，一左進右出，一右進左出，所以兩種判定方式下都是外部區域。

因為方向沒固定，所以從一個點可以作出無數條射線，那會不會出現不同射線有不同結果的情況呢？我嘗試去掉了一個角

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">
  <polygon points="135,104 100,0 40,180 190,60 10,60 100,132" style="fill:red;stroke:black;stroke-width:1;fill-rule:evenodd;"/>
</svg>

結果是這樣的，我認為這裡右下角的線段其實應該算是兩條，畫圖時兩次經過了這個地方，所以應該不能算一條線段，而是兩條，所以按上面講的規則，還是沒錯。暫時想不到會產生不一樣結果射線的點。

學到這裡，仍存在兩個問題：

1、是否有某些點畫出來的射線會得到不同的結果，而最終的結果又是根據哪個?

2、簡單的圖形容易判斷，那複雜的圖形呢？怎麼才能直觀的理解這兩個規則？比如下圖：

以上內容皆為個人理解，若有錯誤，請指教。謝謝。