回復“前端”即可獲贈前端相關(guān)學(xué)習資料
stroke屬性定義了給定圖形元素的外輪廓的顏色。它的默認值是none。
SVG具有stroke-width定義筆觸寬度的CSS屬性。
例：
（這是四個(gè)不同的示例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>
代碼解析：
將筆劃寬度設置為3個(gè)像素。您可以使用不同于像素的單位。在[SVG坐標系統單位中查看所有可用單位。
運行后圖像效果：
strokelinecap屬性定義不同類(lèi)型的開(kāi)放路徑的終結。
<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>
該CSS屬性stroke-linejoin, 定義如何在一個(gè)形狀兩條線(xiàn)之間的連接被渲染。該CSS屬性stroke-linejoin可以采用三個(gè)值中的一個(gè)。這些值是（miter，round，bevel）。
案例：
stroke-linejoin，說(shuō)明了這些不同的值。
<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>
style樣式中stroke-miterlimit屬性與stroke-linejoin一起使用。
如果stroke-linejoin設置為斜接，則stroke-miterlimit可以使用來(lái)限制兩條線(xiàn)相交的點(diǎn)（線(xiàn)角（角）延伸）之間的距離。
<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，三個(gè)路徑如何使用三個(gè)不同的值，否則它們看起來(lái)幾乎相同。
運行后圖像效果：
SVG CSS屬性 stroke-dasharray用于繪制以虛線(xiàn)呈現的SVG形狀的筆觸。之所以稱(chēng)為“破折號數組”，是因為您提供了一個(gè)數字數組作為值。這些值定義破折號和空格的長(cháng)度。
<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>
定義了一個(gè)帶有虛線(xiàn)的筆劃，虛線(xiàn)部分的寬度為10像素，虛線(xiàn)之間的間隔為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的虛線(xiàn)寬度開(kāi)始，然后是5像素的間距，然后是5像素的虛線(xiàn)，然后是5像素的另一間距。然后重復該模式。
第二行以虛線(xiàn)寬度10開(kāi)始，然后是5像素的間距，然后是5像素的虛線(xiàn)，最后是10像素的間距。
SVG CSS屬性stroke-opacity用于定義SVG形狀輪廓的不透明度。stroke-opacity取0和1之間的十進(jìn)制數越接近0的值，越透明行程。該值越接近1，則筆劃越不透明。默認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>
運行效果:
注意：
靠后文本越來(lái)越不可見(jiàn)。
本文基于Html基礎，介紹了stoke屬性。添加不一樣的屬性實(shí)現不同的效果，對于每一種屬性進(jìn)行詳細的講解通過(guò)豐富的案例分析，希望能夠幫助你更好的學(xué)習。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現的時(shí)候，總會(huì )有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
------------------- End -------------------
聯(lián)系客服
