|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
svg circle stroke屬性設(shè)置實(shí)線邊框/虛線邊框/無邊框
作者:admin 時(shí)間:2021-7-23 23:1:59 瀏覽:svg中的<circle>元素，是用來繪制圓形的，不過<circle>有一些屬性或許你還不太了解，其實(shí)利用它的屬性值，可以繪制出各種符合個(gè)人意愿的圓形來，本文就介紹<circle>如何設(shè)置實(shí)線邊框/虛線邊框/無邊框。
實(shí)線邊框
完整HTML代碼
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>
</body>
</html>
執(zhí)行結(jié)果
代碼解釋
本實(shí)例看到，圓形邊框主要是通過stroke屬性值確定，邊框顏色為#006600。
虛線邊框
完整HTML代碼
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"
style="stroke:#006600;
stroke-width: 3;
stroke-dasharray: 10 5;
fill:#00cc00"/>
</svg>
</body>
</html>
執(zhí)行結(jié)果
代碼解釋
本實(shí)例中，邊框有3個(gè)屬性，顏色（#006600）、大?。?code>3）、形狀（虛線 stroke-dasharray: 10 5）。
fill是填充顏色。
無邊框
<circle>除了可以設(shè)置實(shí)線邊框、虛線邊框，還可以禁用邊框，即是無邊框。
完整HTML代碼
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"
style="stroke: none;
fill:#00cc00"/>
</svg>
</body>
</html>
執(zhí)行結(jié)果
代碼解釋
stroke屬性值為none，得到的圓就是無邊框。
相關(guān)文章
x
- 站長推薦
