第四章：基本形狀

4.1線段

SVG可以使用<line>元素畫出一條直線段。使用時只需要指定線段起止點的x和y坐標即可。指定坐標時可以不帶單位，此時會使用用戶坐標，也可以帶上單位，如em、in等。

<line x1="start-x" y1="start-y" x2="end-x" y2="end-y" />

<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 水平線段 -->
        <line 
 
x1="40" y1="20" x2="80" y2="20" style="stroke: black;" />
        <!-- 垂直線段 -->
        <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;"/>
        <!-- 對角線段 -->
        <line x1="30" y1="30" x2="85" y2="85" style="stroke: black;">
    </svg>

效果圖：

4.2筆畫特性

線段可以看作在畫布上畫出的筆畫。筆畫的尺寸、顏色和風格都會影響線段的表現。這些特性都可以在style屬性中指定。

4.2.1 stroke-width

上述例子添加stroke-width：

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 水平線段 -->
        <line x1="40" y1="20" x2="80" y2="20" style="stroke: black;stroke-width:10;" />
 

        <!-- 垂直線段 -->
        <line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: black;stroke-width:10;"/>
        <!-- 對角線段 -->
        <line x1="30" y1="30" x2="85" y2="85" style="stroke: black;stroke-width:10;">
    </svg>

效果圖：

4.2.2畫筆顏色

你可以通過以下幾種方式指定畫筆顏色

① 基本的顏色關鍵字：aquq、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。也可以使用SVG規範第4.2節中規定的顏色關鍵字（http:www.w3.org/TR/SVG/types.html#ColorKeywords）

② 由6位十六進制數字指定的顏色，形式為#rrggbb，其中rr表示紅色，gg表示綠色，bb表示藍色，它們的範圍都是00-ff。

③由3位十六進制數字指定的顏色，形式為#rgb，其中r表示紅色，g表示綠色，b表示藍色。它們的範圍都是0-f。這是前一種方式的簡寫，與之等效的6位數字寫法是將每位重復一次，也就是#d6e與#dd66ee是一樣的。

④通過rgb(red-value,green-value,blue-value)形式指定的rgb顏色值，每個值的取值範圍是整數0-255或者百分比0%-100%。

⑤currentColor關鍵字，表示當前元素應用的CSS屬性color的值。color是用來給HTML的文本設置顏色的，會被子元素繼承，但對SVG沒有直接效果。如果使用內聯SVG圖標的話，使用currentColor可以讓圖標使用它周圍文本的顏色。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <line x1="10" y1="10" x2="50" y2="10" style="stroke: red;stroke-width:5;" />
        <line x1="10" y1="20" x2="50" y2="20" style="stroke: #9f9;stroke-width:5;"/>
        <line x1="10" y1="30" x2="50" y2="30" style="stroke: #9999ff;stroke-width:5;" />
        <line x1="10" y1="40" x2="50" y2="40" style="stroke: rgb(255,128,64);stroke-width:5;"/>
        <line x1="10" y1="50" x2="50" y2="50" style="stroke: rgb(60%,20%,60%);stroke-width:5;">
    </svg>

效果圖：

如果不指定畫筆顏色的話，將看不到任何線，因為stroke屬性的默認值是none。

4.2.3 stroke-opacity

我們可以通過給stroke-opacity屬性賦值來控制線條的不透明度（opacity，與透明度相反。），取值範圍為0.0~1.0.其中0代表完全透明，1代表完全不透明。小於0的值會被更改為0，大於1的值會被更改為1。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <line x1="30" y1="0" x2="30" y2="60" style="stroke: red;stroke-width:5;" />
        <line x1="10" y1="10" x2="50" y2="10" style="stroke-opacity:0.2;stroke: black;stroke-width:5;"/>
        <line x1="10" y1="20" x2="50" y2="20" style="stroke-opacity:0.4;stroke: black;stroke-width:5;"/>
        <line x1="10" y1="30" x2="50" y2="30" style="stroke-opacity:0.6;stroke: black;stroke-width:5;" />
        <line x1="10" y1="40" x2="50" y2="40" style="stroke-opacity:0.8;stroke: black;stroke-width:5;"/>
        <line x1="10" y1="50" x2="50" y2="50" style="stroke-opacity:1.0;stroke: black;stroke-width:5;">
    </svg>

效果圖：

4.2.4 stroke-dasharray屬性

如果你需要點線或者虛線，則需要使用stroke-dasharray屬性，它的值由一列數字構成，代表線的長度和空隙的長度，數字之間用逗號或空格分隔。數字的個數應該為偶數，但如果你指定的數字個數為奇數，則SVG會重復一次，使得總個數為偶數。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 9個像素的虛線，5個像素的空隙 -->
        <line x1="10" y1="10" x2="100" y2="10" style="stroke-dasharray:9,5;stroke:black;stroke-width:2;" />
        <!-- 5個像素的虛線，3個像素的空隙，9個像素的虛線，2個像素的空隙 -->
        <line x1="10" y1="20" x2="100" y2="20" style="stroke-dasharray: 5,3,9,2;stroke:black;stroke-width:2;" />
        <!-- 復制奇數個數，這等價於：9個像素的虛線，3個像素的空隙，5個像素的虛線，9個像素的空隙，3個像素的虛線，5個像素的空隙 -->
        <line x1="10" y1="30" x2="100" y2="30" style="stroke-dasharray: 9,3,5;stroke: black;stroke-width:2;" />
    </svg>

效果圖：

4.3矩形

矩形是最簡單的基本形狀，只需要指定其左上角的x和y坐標以及它的寬度（width）和高度（height）即可。矩形內部會使用fill屬性代表的顏色進行填充，如果沒有指定fill的顏色，則會使用黑色填充。fill屬性的值可以用以上的畫筆顏色的值進行定義，也可以指定為none，則不填充矩形內部，保持透明。也可以通過與stroke-opacity一樣的方式來指定fill-opacity。fill和fill-opacity都是表現屬性，屬於style屬性的值。

繪制矩形的邊框，與上面畫線時指定的stroke一樣。如果不指定stroke，則它的值為none，將不會繪制矩形邊框。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 內部填充為黑色，不繪制邊框 -->
        <rect x="10" y="10" width="30" height="50" />
        <!-- 內部不填充顏色，繪制黑色邊框 -->
        <rect x="50" y="10" width="20" height="40" style="fill:none;stroke: black;" />
        <!-- 內部填充為藍色，繪制較粗的、半透明紅色邊框 -->
        <rect x="10" y="70" width="25" height="30" style="fill:#0000ff;stroke: red;stroke-width:7;stroke-opacity:0.5;" />
        <!-- 內部填充為半透明的黃色，用虛線繪制綠色邊框 -->
        <rect x="50" y="70" width="35" height="20" style="fill:yellow;fill-opacity:0.5;stroke:green;stroke-width:2;stroke-dasharray: 5 2" />
    </svg>

效果圖：

矩形坐標的x和y值默認都為0。如果指定寬或高（width/height）為0，則矩形不顯示，如果指定寬或高為負值則會報錯。

圓角矩形

如果希望得到圓角矩形，可以分別指定x方向和y方向的圓角半徑，rx（x-radius，x方向的圓角半徑）的最大值是矩形寬度的一半。同理，ry（y-radius，y方向的圓角半徑）的最大值是矩形高度的一半。如果只指定了rx和ry中的一個值，則認為它們相等。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- rx和ry相等，逐漸增大 -->
        <rect x="10" y="10" width="20" height="40" rx="2" ry="2" style="stroke: black;fill:none;" />
        <rect x="40" y="10" width="20" height="40" rx="5" style="stroke: black;fill:none;" />
        <rect x="70" y="10" width="20" height="40" rx="10" style="stroke: black;fill:none;" />
        <!-- rx和ry相等，逐漸增大 -->
        <rect x="10" y="60" width="20" height="40" rx="10" ry="5" style="stroke: black;fill:none;" />
        <rect x="40" y="60" width="20" height="40" rx="5" ry="10" style="stroke: black;fill:none;" />
    </svg>

效果圖：

CSS中的border-radius屬性，可以通過設置圓角半徑為寬高的50%，可使矩形變成一個圓或者橢圓。在SVG中也可以通過百分比來指定圓角半徑的值，但會被解析為相對視口的寬度的百分比（和使用百分比來設置矩形的寬和高一樣），而不是相對矩形本身寬高的百分比。

但是創建圓形，SVG有更簡單的方法。

4.4 圓和橢圓

要畫一個圓，需要<circle>元素，並指定圓心的x和y坐標（cx/cy）以及半徑（r），和矩形一樣，不指定fill和stroke的情況下，圓會使用黑色填充並且沒有輪廓線。橢圓除了需要指定圓心的坐標外，還需要同時指定x方向的半徑和y方向的半徑，屬性分別是rx和ry。對圓和橢圓來說。如果省略了cx或者cy，則默認為0。如果半徑為0，則不會顯示圖形。如果半徑為負數，則會報錯。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="30" cy="30" r="20" style="stroke: black;fill:none;" />
        <circle cx="80" cy="30" r="20" style="stroke-width:5;stroke:black;fill:none;" />
        <ellipse cx="30" cy="80" rx="10" ry="20" style="stroke:black;fill:none;" />
        <ellipse cx="80" cy="80" rx="20" ry="10" style="stroke:black;fill:none;" />
    </svg>

效果圖：

4.5多邊形

<polygon>元素可以用來畫任意封閉圖形，這個圖形也可以填充和繪制輪廓。使用時需要為points屬性指定一系列的x/y坐標對，並用逗號或者空格分隔。表示坐標的數字個數必須是偶數。指定坐標時不需要在最後指定返回起始坐標，因為圖形是封閉的，會自動回到起始坐標。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 平行四邊形 -->
        <polygon points="15,10 55,10 45,20 5,20" style="fill:red;stroke: black;" />
        <!-- 五角星 -->
        <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill:#ccffcc;stroke:green;" />
        <!-- 不規則圖形 -->
        <polygon points="60 60,65 72,80 60,90 90,72 80,72 85,50 95" style="fill:yellow;fill-opacity:0.5;stroke: black;stroke-width:2;" />
    </svg>

效果圖：

填充邊線交叉的多邊形

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 未填充的邊線交叉的多邊形 -->
        <polygon points="48,16 16,96 96,48 0,48 80,96" style="stroke: black;fill:none;" />
    </svg>

效果圖：

SVG有兩種判斷某個點是否在多邊形中的規則。分別對應fill-rule（表現的一部分）屬性的nonzero（默認值）和evenodd。選擇不同的規則會有不同的效果。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <!-- 不同填充規則的效果 -->
        <polygon points="48,16 16,96 96,48 0,48 80,96" style="fill-rule: nonzero;fill:yellow;stroke: black;" />
        <polygon points="148,16 116,96 196,48 100,48 180,96" style="fill-rule:evenodd;fill:#00ff00;stroke:black;" />
    </svg>

效果圖：

填充規則解釋：

nonzero規則在判斷某個點是否在圖形內部時，從這個點畫一條線到無窮遠，然後數這條線與圖形邊線有多少次交叉。如果交叉的邊線是從右向左畫，則總數加1；如果交叉的邊線是從左往右畫，則總數減1。如果最後總數為0，則認為改點在圖形外部，否則認為在圖形內部。

evenodd規則也畫了同樣一條線，但它只算與邊線相交的次數。如果總數是奇數，則認為點在圖形內部，否則認為點在圖形外部。

4.6折線

如果想要一系列的直線段，但不閉合為某個形狀。你樂意使用多個<line>元素，但如果有非常多線的話，可能使用<polyline>更容易。它與<polygon>有相同的point屬性，不同之處在於圖形並不封閉。

　　<svg width = "100px" height = "50px" viewBox = "0 0 100 50" xmlns="http://www.w3.org/2000/svg">
        <!-- 折線 -->
        <polyline points="5 20,20 20,25 10,35 30,45 10,55 30,65 10,75 30,80 20,95 20" style="stroke-width:3;fill:none;stroke: black;" />
    </svg>

效果圖：

在使用<polyline>時最好將fill屬性設置為none，否則SVG閱讀器會嘗試填充形狀。

4.7 線帽和線連接

當使用<line>或者<polyline>畫線的時候，可以為stroke-linecap指定不同的值來確定線的頭尾形狀，可能的取值為butt、round、square。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <line x1="10" y1="15" x2="50" y2="15" style="stroke:black;stroke-linecap:butt;stroke-width:15;" />
        <line x1="10" y1="45" x2="50" y2="45" style="stroke:black;stroke-linecap:round;stroke-width:15;" />
        <line x1="10" y1="75" x2="50" y2="75" style="stroke:black;stroke-linecap:square;stroke-width:15;" />
        <!-- 灰色線 -->
        <line x1="10" y1="0" x2="10" y2="100" style="stroke:#999;" />
        <line x1="50" y1="0" x2="50" y2="100" style="stroke:#999;" />
    </svg>

效果圖：

可以看出round和square在起止位置都超過了真實位置，默認值butt則精確地與起止位置對齊。

我們還可以通過stroke-linejoin屬性來指定線段在圖形棱角處交叉時的效果，可能的取值為miter（尖的） 、round（圓的）、bevel（平的）。

效果圖：

如果兩條線相交的時候是銳角，切stroke-linejoin的值為miter，則相交處有可能比線本身要寬。你可以指定stroke-miterlimit的值來設置相交處的顯示寬度和線寬的比率，它的默認值為4

4.8基本形狀總結。

4.8.1形狀元素

<line x1="start-x" y1="start-y" x2="end-x" y2="end-y" />

<rect x="left-x" y="top-y" width="width" height="height" rx="2" />

<circle cx="center-x" cy="center-y" r="radius" />

<ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" />

<polygon points="points-list" />

<polyline points="points-list" />

當你為屬性指定數值時，默認會以用戶坐標為準。上表除了最後兩個元素之外，其他元素的屬性都可以在數字後面加上單位，如mm、pt等。

4.8.2 指定顏色

可以通過以下幾種方式指定填充或者輪廓的顏色。

①none：不繪制輪廓或不為形狀填充顏色。

其余見上方4.2.2畫筆顏色。

4.8.3筆畫和填充特性。

為了使線或者輪廓顯示出來，必須使用以下屬性指定筆畫的特性。圖形的輪廓會在內部填充完之後進行繪制。

下表中總結的所有特性都是表現特性，都屬於style屬性。

下表中的屬性可以用來控制圖形內部填充的方式。圖形會首先填充內部在繪制輪廓。

這些只是SVG元素上可以應用的一部分樣式屬性。

o'Reill的SVG精髓（第二版）學習筆記——第四章