stroke屬性定義了給定圖形元素的外輪廓的顏色。它的默認值是none。
常用的屬性有：
stroke-width
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-dasharray + stroke-dashoffset
stroke-opacity
CSS樣式style的stroke和fill指定SVG形狀的內(nèi)部屬性。這是一個示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="50" r="50" style="stroke: #000066; fill: 3333ff;" /> </svg>測試看看?/?
本示例定義了一個具有較深的藍色筆觸顏色和較淺的藍色填充色的圓。
SVG形狀的筆觸是形狀的輪廓。這是一個SVG筆畫示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="25" style="stroke: #000000; fill:none;" /></svg>測試看看?/?
本示例定義了一個黑色（#000000）筆觸顏色且沒有填充的圓。運行后圖像效果：
您可以將SVG筆觸和填充顏色組合為SVG形狀。這是一個SVG筆觸和填充示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="25" style="stroke: #000066; fill: #3333ff;" /></svg>測試看看?/?
本示例定義了一個具有較深的藍色（#000066）筆觸顏色和較淺的藍色（#3333ff）填充色的圓。運行后圖像效果：
SVG具有stroke-width定義筆觸寬度的CSS屬性。這是一個SVG stroke-width示例：
stroke-width: 3px;
本示例將筆劃寬度設(shè)置為3個像素。您可以使用不同于像素的單位。在SVG坐標系統(tǒng)單位中查看所有可用單位。
這是四個不同的示例stroke-width：
<svg width="500" height="120"> <circle cx="50" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 1px;" /> <circle cx="150" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 3px;" /> <circle cx="250" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 6px;" /> <circle cx="350" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 12px;" /> </svg>測試看看?/?
運行后圖像效果：
SVG CSS屬性 stroke-linecap定義了SVG行的末端如何呈現(xiàn)。CSS屬性stroke-linecap有三個可能的值。這些是：
butt square round
該值將butt產(chǎn)生一個線蓋，該線蓋將在該線的末端精確切斷。該值將square導致線帽看起來像butt（截斷），但會稍微超出該行的終點。該值將round導致線上限。
這里有三個SVG stroke-linecap其示出了這三個示例 stroke-linecap的值（序列= butt，square，round）：
本示例定義了三個綠線，其中a stroke-width為10，以更好地說明stroke-linecapCSS屬性的效果。內(nèi)的每個綠線繪制黑線用stroke-width 的1這條線具有相同x1, y1和x2, y2坐標為綠線，但沒有 stroke-linecap一套。這樣，您可以看到不同stroke-linecap 值之間的差異。
該CSS屬性stroke-linejoin定義如何在一個形狀兩條線之間的連接被渲染。該CSS屬性stroke-linejoin可以采用三個值中的一個。這些值是：
miter round bevel
這是三個SVG stroke-linejoin示例，它們說明了這些不同的值：
<svg width="500" height="120"> <path d="M20,100 l20,-50 l20,50" style="stroke: #000000; fill:none;stroke-width:16px;stroke-linejoin: miter;" ></path> <text x="22" y="20">miter</text> <path d="M120,100 l20,-50 l20,50" style="stroke: #000000; fill:none;stroke-width:16px;stroke-linejoin: round;" ></path> <text x="122" y="20">round</text> <path d="M220,100 l20,-50 l20,50" style="stroke: #000000; fill:none;stroke-width:16px;stroke-linejoin: bevel;" ></path> <text x="222" y="20">bevel</text> </svg>測試看看?/?
style樣式中stroke-miterlimit屬性與stroke-linejoin一起使用。如果stroke-linejoin設(shè)置為斜接，則stroke-miterlimit可以使用來限制兩條線相交的點（線角（角）延伸）之間的距離。
這是一個SVG stroke-miterlimit示例：
<svg width="500" height="120"> <path d="M20,100 l20,-50 l20,50" style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: miter; stroke-miterlimit: 1.0; " ></path> <text x="29" y="20">1.0</text> <path d="M120,100 l20,-50 l20,50" style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: miter; stroke-miterlimit: 2.0; " ></path> <text x="129" y="20">2.0</text> <path d="M220,100 l20,-50 l20,50" style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: miter; stroke-miterlimit: 4.0; " ></path> <text x="229" y="20">4.0</text> </svg>測試看看?/?
請注意stroke-miterlimit，三個路徑如何使用三個不同的值，否則它們看起來幾乎相同。運行后圖像效果：
線連接的長度稱為斜接長度。斜接長度是從連接線的內(nèi)角到連接線的尖端測量的。在此圖像中，斜接長度在連接線的頂部以紅色繪制，并在連接線的右側(cè)再次重復：
可以想象，行程越寬，連接線之間的角度越大，斜接時間就越長。
在stroke-miterlimit實際上設(shè)置了斜接長度和筆劃寬度之間的比率的上限。因此，stroke-miterlimit為1.0表示斜接長度最大為1 x筆劃寬度。斜接超出了該范圍。1.0是stroke-miterlimit的最小可能值。
以下是一些使用1.0as stroke-miterlimit值的示例，但是連接線的角度不同：
請注意，當角度較大時，斜接的被切除部分將較大。那是因為尖銳的角度自然會產(chǎn)生更長的斜接。
SVG CSS屬性 stroke-dasharray用于繪制以虛線呈現(xiàn)的SVG形狀的筆觸。之所以稱為“破折號數(shù)組”，是因為您提供了一個數(shù)字數(shù)組作為值。這些值定義破折號和空格的長度。因此，您應該提供偶數(shù)個數(shù)字。
這是一個SVG stroke-dasharray示例：
<svg width="500" height="120"> <line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none; stroke-width: 6px; stroke-dasharray: 10 5" /> </svg>測試看看?/?
本示例定義了一個帶有虛線的筆劃，虛線部分的寬度為10像素，虛線之間的間隔為5像素。運行后圖像效果：
以下是一些帶有不同破折號和空格寬度的示例：
<svg width="500" height="120"> <line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none; stroke-width: 6px; stroke-dasharray: 10 5 5 5" ></line> <line x1="20" y1="40" x2="120" y2="40" style="stroke: #000000; fill:none; stroke-width: 6px; stroke-dasharray: 10 5 5 10" ></line> </svg>測試看看?/?
第一行以10的虛線寬度開始，然后是5像素的間距，然后是5像素的虛線，然后是5像素的另一間距。然后重復該模式。
第二行以虛線寬度10開始，然后是5像素的間距，然后是5像素的虛線，最后是10像素的間距。
運行后圖像效果：
stroke-dashoffset用于設(shè)置多遠虛線模式啟動模式。這樣，您可以從中途開始劃線，例如從圖案中途開始，然后從那里重復圖案。這是一個SVG stroke-dashoffset示例：
<svg width="500" height="120"> <line x1="20" y1="20" x2="170" y2="20" style="stroke: #000000; fill:none; stroke-width: 6px; stroke-dasharray: 10 5; stroke-dashoffset: 5; " /> </svg>測試看看?/?
此示例設(shè)置dash-offset為5像素，這意味著虛線的渲染將以5像素開始進入虛線模式（并非所有瀏覽器都完全支持此功能）。運行后圖像效果：
SVG CSS屬性stroke-opacity用于定義SVG形狀輪廓的不透明度。stroke-opacity取0和1之間的十進制數(shù)越接近0的值，越透明行程。該值越接近1，則筆劃越不透明。默認stroke-opacity值為1，表示筆劃完全不透明。
這是一個SVG stroke-opacity示例，其中顯示了三行帶有不同stroke-opacity文本頂部的行 ：
<svg width="500" height="120"> <text x="22" y="40">Text Behind Shape</text> <path d="M20,40 l50,0" style="stroke: #00ff00; fill:none; stroke-width:16px; stroke-opacity: 0.3; " ></path> <path d="M80,40 l50,0" style="stroke: #00ff00; fill:none; stroke-width:16px; stroke-opacity: 0.7; " ></path> <path d="M140,40 l50,0" style="stroke: #00ff00; fill:none; stroke-width:16px; stroke-opacity: 1; " ></path> </svg>測試看看?/?
這是生成的圖像。請注意，靠后文本越來越不可見。