[[383060]]

stroke屬性定義了給定圖形元素的外輪廓的顏色。它的默認(rèn)值是none。

一、屬性

1. stroke-width

SVG具有stroke-width定義筆觸寬度的CSS屬性。

例：

（這是四個不同的示例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> 

代碼解析：

將筆劃寬度設(shè)置為3個像素。您可以使用不同于像素的單位。在[SVG坐標(biāo)系統(tǒng)單位中查看所有可用單位。

運(yùn)行后圖像效果：

2. stroke-linecap(描邊線帽)

strokelinecap屬性定義不同類型的開放路徑的終結(jié)。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
<g fill="none" stroke="black" stroke-width="6">    
<path stroke-linecap="butt" d="M5 20 l215 0" />    
<path stroke-linecap="round" d="M5 40 l215 0" />    
<path stroke-linecap="square" d="M5 60 l215 0" />  
     </g> 
</svg> 

3. stroke-linejoin

該CSS屬性stroke-linejoin, 定義如何在一個形狀兩條線之間的連接被渲染。該CSS屬性stroke-linejoin可以采用三個值中的一個。這些值是(miter，round，bevel)。

案例：

stroke-linejoin，說明了這些不同的值。

<svg width="500" height="120"> 
<path d="M20,100 l20,-50 l20,50" style="stroke: #FF0000;   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: #FF0000;   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: #FF0000;   fill:none;stroke-width:16px;stroke-linejoin: bevel;"></path> 
<text x="222" y="20">bevel</text> 
</svg> 

4. stroke-miterlimit

style樣式中stroke-miterlimit屬性與stroke-linejoin一起使用。

如果stroke-linejoin設(shè)置為斜接，則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，三個路徑如何使用三個不同的值，否則它們看起來幾乎相同。

運(yùn)行后圖像效果：

5. stroke-dasharray

SVG CSS屬性 stroke-dasharray用于繪制以虛線呈現(xiàn)的SVG形狀的筆觸。之所以稱為“破折號數(shù)組”，是因為您提供了一個數(shù)字?jǐn)?shù)組作為值。這些值定義破折號和空格的長度。

<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像素。

運(yùn)行后圖像效果：

帶有不同破折號和空格寬度的

<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> 

 運(yùn)行后圖像效果：

代碼解析：

第一行以10的虛線寬度開始，然后是5像素的間距，然后是5像素的虛線，然后是5像素的另一間距。然后重復(fù)該模式。

第二行以虛線寬度10開始，然后是5像素的間距，然后是5像素的虛線，最后是10像素的間距。

6. stroke-opacity

SVG CSS屬性stroke-opacity用于定義SVG形狀輪廓的不透明度。stroke-opacity取0和1之間的十進(jìn)制數(shù)越接近0的值，越透明行程。該值越接近1，則筆劃越不透明。默認(rèn)stroke-opacity值為1，表示筆劃完全不透明。

案例中，顯示了三行帶有不同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> 

 運(yùn)行效果:

注意：

靠后文本越來越不可見。

二、總結(jié)

本文基于Html基礎(chǔ)，介紹了stoke屬性。添加不一樣的屬性實現(xiàn)不同的效果，對于每一種屬性進(jìn)行詳細(xì)的講解通過豐富的案例分析，希望能夠幫助你更好的學(xué)習(xí)。

歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。