主題

SVG 自學微筆記(04) - 繪製多邊形、折線

冰抹茶拿鐵 | 2023-03-02 12:00:17 | 巴幣 0 | 人氣 120

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>