過去幾周我講解了可縮放矢量圖形(SVG)的一些基礎知識。首先，我展示了如何在HTML中嵌入SVG，接著講解了如何創建SVG預定義的基礎圖形。

為了讓創建的圖形顯示出來，我在這兩篇文章中都使用了填充和描邊屬性。今天我想要詳細講講填充和描邊以及它們的一些相關的屬性。

填充屬性

正如你所理解的，填充屬性就是用你選定的顏色來填充你創建的圖形(或線條)的內部區域。這是使用了填充的矩形和圓形：

你也可以在你的CSS中設置填充值，下面我在不同的class類中設置了填充。但是如果你喜歡的話，你也可以直接在SVG屬性中設置。

.rectangle {fill: red;}

.circle {fill: #039;}

默認情況下的填充顏色是 black 或者 #000000 ，所以如果你不想要你的圖形被填充的話，你需要顯式地設置 fill 為 none 。

fill-rule 屬性

關于圖形(或線條)的內部區域，是由 fill-rule 屬性決定的，它有 nonzero 和 evenodd 兩個值：

fill-rule="nonzero"

fill-rule="evenodd"

我并不打算假裝我是完全了解這兩種算法是如何工作的。下面是官方定義。還有來自規范文件的這兩個算法分別的示例圖像：

nonzero—這個規則通過從canvas上的某個點往任一方向繪制射線到無窮遠，然后檢查圖形的線段和射線相交的點，來確定“內部區域”。從0開始計數，每次路徑線段是從左到右穿過射線就加一，從右到左的就減一。通過計算交叉點，如果結果是0，則這個點在路徑外邊，不然，就是在里邊。

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

讓我覺得困惑的是這兩組SVG圖形的最后一個示例。我不明白為什么它們明明是一樣的圖形，可是第二組示例的結果卻不一樣。如果有誰能解釋一下的話，我會很感激的。

fill-opacity 屬性

你還可以設置填充的 fill-opacity 屬性。

fill-opacity="0.5"

它的取值應在0(透明)和1(不透明)之間，和CSS的opacity屬性一樣，我想也不需要我進一步解釋了吧。

描邊屬性

填充屬性可以幫你在元素內部添加顏色，而描邊屬性則可以在元素周圍添加顏色，它們定義了元素的輪廓。

stroke 和 stroke-width 屬性

描邊比填充多幾個屬性，而且坦白說，我覺得它們都挺有趣的。如果你看過這個系列的前幾篇文章，你應該已經看到兩個描邊屬性了， stroke 和 stroke-width 。第一個屬性接受一個顏色值，第二個屬性取一組測量值。

stroke="blue"

stroke="#347559

stroke-width="3px"

stroke-width="1em"

stroke-width="2%"

當 stroke-width 的值為百分比時，表示它是當前視圖的百分比值。

stroke-opacity 屬性

還有一個 stroke-opacity 屬性，我想也不需要再詳細說明了吧。

stroke-opacity="0.25"

stroke-linecap 屬性

還有 stroke-linecap 屬性可以讓你在線條末端控制圖形。你可以選擇對接(butt)、方形(square)和圓形(round)，可以在下邊的圖片中看到對應的示例效果：

stroke-linejoin 屬性

stroke-linejoin 屬性也是類似的，但是它控制的是兩條線段之間的銜接。你可以在繪制折線時使用它。它有三個值，尖角(miter)、圓角(round)和斜角(bevel),可以在下面的圖片中看到對應的效果：

如果你設置 miter 作為 linejoin 的值，它的線條就會呈銳角連接，而且尖角可能超過了描邊的厚度。

stroke-miterlimit 屬性

stroke-miterlimit 屬性給 miter-length 和 stroke-width 之間的比率做了限制，它的比值范圍應大于或等于1。當比值不在這個范圍的時候， stroke 就會被轉換成斜角(bevel)。

stroke-dasharray 屬性

stroke-dasharray 是用于設置虛線的屬性。你可以使用它來設置每條劃線長度以及劃線之間空格的大小。

第一個值是劃線的長度，第二個值是各個劃線之間的空格大小。如果你只設置了一個值(如上面的最后一個示例)，它會默認設置相同劃線長度和劃線空格。

stroke-dasharray 屬性可以做的東西還有很多很多。雖然我之前的示例是它只接受一組值作為參數，但是它也可以接受多組值，并使用逗號來分隔每一組值。

虛線會根據不同組的劃線長度和空格大小來繪制圖案，然后一直重復，直到可放置圖案的空間用完。在上面的示例中，我設置了最后一個空格大小為30px，方便我們查看圖案的重復。

stroke-dashoffset 屬性

最后一個屬性是 stroke-dashoffset ，它可以讓你設置需要圖案延遲繪制的距離。它可以接受任何單位的值，同樣的，如果使用的是百分比，就是相對于當前視圖的百分比。

再回去看看上一段內容。 stroke-dashoffset 屬性的結果和我最初的期望完全不符。我的初衷是設置一個偏移量，將圖案的繪制起點往后移?？墒墙Y果恰恰相反，偏移量是讓圖案往前移的。

這是應用了偏移量和沒有應用偏移量的同一個圖案，希望可視化的結果可以幫助大家理解。

圖形和線條

在這篇文章的開頭我提到你可以填充圖形或者線條，這聽起來可能有點怪怪的。你怎么可能填充線條呢？畢竟，它是由線條組成的。

除了容易混淆的nonzero和evenodd算法，你可能不需要我來幫你理解像矩形或者圓形這樣的基礎圖形的填充和描邊。描邊是圖形的輪廓，填充是輪廓之內的所有東西。

既然這樣的話，那線條呢？大部分線條不會使用填充，你看到的大多是線條的描邊。線條沒有什么內部填充，但是如果它是折線的話，可能就可以被填充了。折線可以看成是由每條有端點的線段組成的多邊形。

例如，下邊圖中的折線和多邊形看起來完全一樣。

但是如果你添加一個描邊，你會看到多邊形把整個圖形的輪廓都用線條完整地從起點到終點繪制出來了，而折線則沒有。盡管它們的填充是一樣的。

SVG屬性和CSS

對于這個系列中的大部分示例，我都在不同的SVG元素上設置了SVG的屬性作為其元素屬性。之前的文章中我也展示了如何在你的CSS文件中設置屬性值。你可以在CSS中設置更多的SVG屬性，雖然不是所有的屬性都可以，但是至少填充和描邊是沒有問題的。

你可以添加內聯CSS如下：

你也可以直接在你的CSS文件中設置樣式。

.example {

fill: teal;

stroke: red;

stroke-width: 5px

}

記住，把填充設置為和背景顏色不同的顏色，設置stroke和stroke-width，而不是border-color或者border-width。

很多其它的SVG屬性都可以寫成CSS屬性，而不是把它們作為屬性添加給某個SVG元素。W3C有在維護這樣的一個列表——可以用CSS樣式來寫的各個SVG屬性。

總結思考

正如我希望你了解的，給基礎圖形和線條添加填充和描邊非常容易。如果你曾使用過background-color屬性以及[CSS的border屬性](borders in CSS](http://www.vanseodesign.com/css/borders-rounded-corners/)，這篇文章對你來說就基本是復習了。

我對填充規則的算法還是有點不明白，但是直接用這兩種可能性來測試還是很簡單的，看看哪一個能夠讓你看到你想要的結果就行。

填充和描邊都可以設置不透明度，描邊還提供了設置線條終點形狀、以及線段交接處形狀的屬性。你還可以把實線描邊換成虛線描邊。

你現在已經掌握了足夠的基礎，可以創建簡單的SVG了。你需要知道如何創建簡單的圖形(如矩形、圓形或者是用多邊形建立的復雜的形狀)，并為它們添加填充和描邊。類似的還有簡單或復雜的線條。

這些是非常基礎的東西，除了用顏色填充圓形和矩形，你還可以使用SVG做很多其它的事情。比如，相比一個固態填充，你可以使用漸變或圖案來填充其它的SVG元素。

在我們講到那里之前，我想先看看我講解圖形時提到的東西。我提到路徑是更好的用來創建基礎圖形的另一種方法。接下來的幾個星期我會講解如何使用路徑創建直線、曲線和圖形。

在校學生，本科計算機專業。逗比一枚，熱愛前端熱愛生活，喜歡CSS喜歡JavaScript喜歡SVG，愛玩PS玩AI玩啊逗比的軟件。努力向上，厚積薄發。

總結

以上是生活随笔為你收集整理的java polygon描边_SVG基础——填充和描边的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。