SVG 設定線條樣式

admin發表於2018-12-03
SVG

線條雖然簡單，但總歸還是要修飾的，畢竟它是圖案的構成基礎之一。

根據需要進行必要的修飾也是常見的操作，設定線條外觀的屬性有很多。

下面對常見的幾個屬性通過程式碼例項進行一下演示。

一.設定線條顏色與粗細：

通過stroke屬性可以設定線條的顏色，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0px;
  padding: 0px;
}
svg {
  border:1px dotted #ccc;
  margin:50px;
}
</style>
</head>
<body>
<svg width="220" height="80" >
  <line
    x1="0" y1="0"
    x2="200" y2="60"
    stroke-width=1
    stroke="red"/>
</svg>
</body>
</html>

通過stroke-width屬性設定線條的粗細，而stroke屬性可以設定顏色。

stroke屬性值不僅僅是顏色，還可以是圖案、漸變等。

更多內容參閱SVG 填充、描邊和透明度一章節。

二.設定描邊連線處風格：

線條總有相接的時候，就和人總有相逢一個道理。

相逢的感情有不同，比如冷漠、熱烈或者歡快，線條相接也是如此。

有時候尖銳，有時候平滑，通過stroke-linejoin屬性即可實現設定。

[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="300" >
  <polyline 
    points="40 60 80 20 120 60" 
    stroke="black" 
    stroke-width="20"
    fill="transparent" 
    stroke-linejoin="miter" />
  <polyline 
    points="40 140 80 100 120 140" 
    stroke="black" 
    stroke-width="20" 
    fill="transparent" 
    stroke-linejoin="round" />
  <polyline 
    points="40 220 80 180 120 220" 
    stroke="black" 
    stroke-width="20"
    fill="transparent"
    stroke-linejoin="bevel" />
</svg>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091619b60451ahmmge8q21.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

stroke-linejoin屬性的三個屬性值分別對應三種不同的效果。

三.設定直線兩端的風格：

預設狀態下，直線的兩端是平直的，使用stroke-linecap屬性可以進行簡單的修飾。

程式碼例項如下：

[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="300" >
  <line 
    x1="20" y1="20" 
    x2="160" y2="20" 
    stroke="black" 
    stroke-width="20" 
    stroke-linecap="butt"/>
  <line 
    x1="20" y1="50" 
    x2="160" y2="50" 
    stroke="black"
    stroke-width="20"
    stroke-linecap="round" />
  <line 
    x1="20" y1="80"
    x2="160" y2="80"
    stroke="black"
    stroke-width="20"
    stroke-linecap="square"/>
</svg>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091658o3sjh6ldezffbixo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

stroke-linecap三個屬性值解析如下：

（1）.butt：預設值，直線的兩側是平直的。

（2）.square：直線的兩端同樣是平直的，好像與butt沒區別，其實多了一塊。

（3）.round：直線兩端是圓潤的帽形，當然尺寸也增加。

增加的尺寸也是有講究的，尺寸是線條寬度的一半，也就是stroke-width屬性值的一半。

四.設定最大斜接長度：

斜接長度指的是在兩條描邊交匯處內角和外角之間的距離。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091728fh1887m2jr7veaec.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

斜接長度長度就是黃色區域的尺寸。

使用stroke-miterlimit屬性可以實現設定斜接最大尺寸的功能，程式碼例項如下：

[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="300" >
  <polyline 
    points="40 60 80 20 120 60" 
    stroke="black" 
    stroke-width="20" 
    fill="transparent" 
    stroke-linejoin="miter"
    stroke-miterlimit="2"/>
</svg>
</body>
</html>

特別強調一點，stroke-miterlimit必須和stroke-linejoin="miter"配合使用採有效。

從兩個屬性的名稱也可以猜測到這一點，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/03/091802g5xnq2ssr05h885r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼設定stroke-miterlimit屬性值為2（很小的一個值），但是斜接的尺寸挺大的（應該遠大於2px），但是為什麼整個斜接能完整顯示呢。這裡一定要特別注意了，stroke-miterlimit屬性值這個數字的單位不是畫素，而是相對stroke-width屬性值的一個倍數，所以上述程式碼實際設定的斜接最大2*20=40，如果斜接尺寸超出的部分將會被裁切。

五.設定虛線與偏移：

還可以設定線條的虛線與偏移效果，考慮到文章的篇幅問題，本文不做介紹。

具體參閱如下兩篇文章：

（1）.設定虛線具體參閱SVG stroke-dasharray虛線邊框一章節。

（2）.設定虛線邊框偏移量具體參閱SVG stroke-dashoffset邊框偏移一章節。

相關文章