SVG stroke-dasharray虛線邊框

admin發表於2018-08-21
SVG

繪製虛線邊框是SVG最為基礎的技能之一，利用stroke-dasharray屬性即可實現。

本文將通過程式碼例項詳細介紹一下stroke-dasharray屬性的用法。

首先看一段繪製實線邊框的例子：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg width="300" height="200">
  <rect x="10" y="10"
    width="100" height="100"
    stroke="red"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/135805n99fro9966xv693y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

預設情況下，繪製圖形的邊框（描邊）都是實心的。

程式碼分析如下：

（1）.stroke：設定邊框（描邊）顏色。

（2）.stroke-width：設定邊框（描邊）寬度。

（3）.fill：設定矩形的填充顏色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg width="300" height="200">
  <rect x="10" y="10"
    width="100" height="100"
    stroke="red"
    stroke-dasharray="10"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/140128vyxcg9pdxykp7z2p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過stroke-dasharray屬性實現矩形虛線邊框效果。

程式碼分析如下：

（1）.stroke-dasharray屬性值是一個數列，既可以是普通數字也可以是百分比。

（2）.數值之間可以用逗號或者空格分隔，用來規定短線和缺口的長度。

（3）.如果提供了奇數個數值，則數列重複一次，從而變成偶數個數值。

著重分析一下第三條規則：

如果數列內容是"5,3,2"，那麼數列內容會重複一次，變為"5,3,2,5,3,2"。

由此，上面程式碼中，stroke-dasharray屬性值是"10"，最終被處理為"10,10"。

從情理上也很容易理解，如果數列內容是奇數個，那麼無法形成虛線規則的迴圈。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg width="400" height="600">
  <rect x="10" y="10"
    width="300" height="300"
    stroke="red"
    stroke-dasharray="10,20,30"
    stroke-width=2;
    fill="green" />
</svg>  
</body>
</html>

stroke-dasharray="10,20,30"會被轉換為stroke-dasharray="10,20,30,10,20,30"。

仔細觀察邊框的線條和空缺的規律，第一個10規定線條尺寸，那麼緊跟的20規定空缺尺寸，以此類推。

當"10,20,30,10,20,30"完全繪製完畢，那麼就從頭再迴圈一次，以此類推。

相關文章