深入理解svg的描邊
我們在繪製SVG圖形的時候經常需要繪製一些箭頭、點狀線和虛線效果，雖然我們可以通過Adobe Illustrator和Inkscape等向量圖軟體來直接生成這些圖形，但是我們更應該瞭解如何手動來實現這些圖形效果。
一條路徑（path）的外觀是由描邊（stroke）屬性和stroke-width屬性來控制的。stroke屬性用於控制線條的顏色，而stroke-width屬性則用於控制線條的寬度。
虛線（Dashes）
SVG的描邊屬性提供了一個stroke-dasharray屬性來實現虛線的效果。stroke-dasharray屬性的值可以由1個或多個數值組成。第一個數代表虛線的長度，第二個數代表虛線之間的間隙的長度。不帶單位的數值的會被解析為畫素單位，你也可以使用任何在SVG中有效的長度單位。
如果stroke-dasharray的值只有一個數，表示虛線的長度和虛線間的間隙相等，例如：
<svg
viewBox="0 0 300 10">
<line
x1="0"
y1="0"
x2="300"
y2="0"
stroke="black"
stroke-width="10"
stroke-dasharray="5"
/>
</svg>
|
上面的程式碼會得到下面的虛線效果：
我們也可以設定CSS樣式來達到相同的效果。
<svg
viewBox="0 0 300 10"><style
type="text/css">
line#simple {
stroke: black;
stroke-width: 5;
stroke-dasharray: 5;
}
</style>
<line
id="simple"
x1="0"
y1="0"
x2="300"
y2="0"
/>
</svg>
|
如果stroke-dasharray的值有2個數，那麼第一個數代表虛線的長度，第二個數代表虛線之間的間隙的長度。例如：
<svg
viewBox="0 0 300 10">
<line
x1="0"
y1="0"
x2="300"
y2="0"
stroke="black"
stroke-width="5"
stroke-dasharray="5,10"
/>
</svg>
|
上面的程式碼會得到下面的虛線效果：間隙是虛線長度的2倍。
同樣也可以通過CSS來實現它：
<svg
viewBox="0 0 300 10">
<style
type="text/css">
line#simple {
stroke: black;
stroke-width: 5;
stroke-dasharray: 5, 10;
}
</style>
<line
id="simple"
x1="0"
y1="0"
x2="300"
y2="0"
/>
</svg>
|
如果stroke-dasharray的值為奇數，例如3個，那麼虛線會按這種指定的模式重複繪製。例如，如果指定的值是5,20,5：
<svg
viewBox="0 0 300 10">
<line
x1="0"
y1="0"
x2="300"
y2="0"
stroke="black"
stroke-width="5"
stroke-dasharray="5,20,5"
/>
</svg>
|
上面的程式碼會得到下面的虛線效果：先繪製5畫素的虛線，然後是20畫素的間隙，最後是5畫素的虛線。接著按照這個模式繼續重複繪製。
stroke-dashoffset
stroke-dashoffset屬性用於指定虛線的偏移距離。例如下面的例子：
<svg
viewBox="0 0 300 10">
<style
type="text/css">
line#simple {
stroke: black;
stroke-width: 5;
stroke-dasharray: 5, 20, 5;
stroke-dashoffset: 20;
}
</style>
<line
id="simple"
x1="0"
y1="0"
x2="300"
y2="0"
/>
</svg>
|
上面的程式碼會得到下面的虛線效果：這條虛線和上例中的虛線是同一條虛線，只不過它使用stroke-dashoffset屬性將它的開始位置移動了20畫素。
描邊動畫
我們可以通過CSS來製作SVG的描邊動畫。如果stroke-dashoffset屬性的值和stroke-dasharray的值相同，並且它們都等於路徑的長度，此時，我們只需要實時改變stroke-dashoffset的值，就可以製作出描邊動畫效果。
@keyframes strokeanim {
to { stroke-dashoffset:
0; }
}
line#dashstart {
stroke: hsl(260,
50%,
30%);
stroke-width:
15;
stroke-dasharray:
300;
stroke-dashoffset:
300;
animation: strokeanim
2s alternate infinite;
}
|
Stroke的其它用法
在上面的例子中都是使用<line>元素來作為例子。實際上，Stroke可以使用在任何SVG基本圖形中，包括矩形、多邊形和路徑等。例如下面的程式碼使用虛線來繪製一個矩形。
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 200">
<style
type="text/css">
rect#strokedrect {
stroke: hsl(260, 50%, 3%);
fill: white;
stroke-width: 7;
stroke-dasharray: 10;
}
</style>
<rect
id="strokedrect"
x="0"
y="0"
width="300"
height="200"
/>
</svg>
|
得到的結果如下：需要注意的是描邊總是繪製在路徑的中心點上。在上面的例子中我們看不出什麼問題，這是因為SVG矩形和它的viewBox容器的大小相同，並且沒有填充色。如果我們設定SVG矩形和viewBox的大小不一樣，再給它一個填充色，就可以看到問題的所在了。
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 200">
<style
type="text/css">
rect#strokedrect {
stroke: hsl(260, 50%, 3%);
fill: gray;
stroke-width: 7;
stroke-dasharray: 10;
}
</style>
<rect
id="strokedrect"
x="20"
y="20"
width="260"
height="160"
/>
</svg>
|
得到的結果如下：到目前為止，SVG還不支援stroke的定位，例如沒有“居內”、“居外”和“居中”的設定。但是在SVG2中提出了相關的內容。
同樣，我們也可以為SVG矩形制作描邊動畫效果。例如：
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 200">
<style
type="text/css">
@keyframes marchingants {
to { stroke-dashoffset: 19; }
}
rect#strokedrect {
stroke: hsl(260, 50%, 90%);
fill: white;
stroke-width: 7;
stroke-dasharray: 10;
animation: marchingants 1s forwards infinite linear;
}
</style>
<rect
id="strokedrect"
x="0"
y="0"
width="300"
height="200"
/>
</svg>
|