回覆“前端”即可獲贈前端相關學習資料
stroke屬性定義了給定圖形元素的外輪廓的顏色。它的默認值是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>
代碼解析:
將筆劃寬度設置爲3個像素。您可以使用不同於像素的單位。在[SVG座標系統單位中查看所有可用單位。
運行後圖像效果:
2. stroke-linecap(描邊線帽)
strokelinecap屬性定義不同類型的開放路徑的終結。
<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設置爲斜接,則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,三個路徑如何使用三個不同的值,否則它們看起來幾乎相同。
運行後圖像效果:
5. stroke-dasharray
SVG CSS屬性 stroke-dasharray用於繪製以虛線呈現的SVG形狀的筆觸。之所以稱爲“破折號數組”,是因爲您提供了一個數字數組作爲值。這些值定義破折號和空格的長度。
<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像素的間距。
6. stroke-opacity
SVG CSS屬性stroke-opacity用於定義SVG形狀輪廓的不透明度。stroke-opacity取0和1之間的十進制數越接近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>
運行效果:
注意:
靠後文本越來越不可見。
二、總結
本文基於Html基礎,介紹了stoke屬性。添加不一樣的屬性實現不同的效果,對於每一種屬性進行詳細的講解通過豐富的案例分析,希望能夠幫助你更好的學習。
歡迎大家積極嘗試,有時候看到別人實現起來很簡單,但是到自己動手實現的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,纔可以理解的更加深刻。
------------------- End -------------------
往期精彩文章推薦:
歡迎大家點贊,留言,轉發,轉載,感謝大家的相伴與支持
想加入前端學習羣請在後臺回覆【入羣】
萬水千山總是情,點個【在看】行不行
本文分享自微信公衆號 - 前端進階學習交流(gh_cf4e462f0835)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。