SVG 填充、描邊和透明度設定

admin發表於2019-04-25
SVG

本章節通過程式碼例項介紹一下如何實現SVG圖形的填充、描邊和透明度設定。

非常簡單的操作，可以類比於CSS設定元素的背景、邊框和透明度的操作。

最為熟悉的填充或者描邊操作都是對顏色的設定，其實也可以設定漸變或者圖案等。

本文為了簡便，只以設定顏色為例子進行演示，更多內容可以參閱如下幾篇文章：

（1）.SVG <pattern> 圖案模式一章節。

（2）.SVG <linearGradient> 線性漸變一章節。

（3）.SVG <radialGradient>徑向漸變一章節。

下面進入正題，分別通過程式碼例項介紹一下標題中提到的三個操作。

一.SVG 填充操作：

填充操作可以類比CSS設定元素背景顏色，非常的簡單。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg測試</title>
<style type="text/css">
svg {
  width:300px;
  height:300px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
    cx="120" cy="120"
    r="80"
    fill="red"/>
</svg>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/25/181330ulblzlbr9dmwbbrw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼將繪製的圓形，填充為紅色，非常簡單的操作。

使用fill屬性即可實現，文章的開頭已經介紹過，作為填充的內容沒必要都是顏色。

也可以是漸變或者圖案等，本文就不再演示，上面對應的文章中應該有介紹。

上述程式碼中，顏色值是關鍵字形式，當然也可以是其他格式的顏色值，比如RGB或者十六進位制。

只要CSS中合法的顏色值，在SVG中都是合法的，具體參閱CSS 顏色值型別一章節。

SVG填充與canvas類似，也需要遵守相應的填充規則，具體參閱canvas 非零繞組規則與奇偶規則一章節。

二.SVG描邊：

描邊可以類比於CSS設定元素邊框，看如下程式碼例項：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/25/181406borlv8z8nbsrn1vn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼簡單分析如下：

（1）.stroke屬性用於設定元素的描邊顏色，也就是邊框顏色。

（2）.stroke-width屬性用於設定元素描邊的寬度，也就是邊框的寬度。

三.SVG透明度：

SVG的透明度可以類比於CSS設定元素的透明度。

設定透明度可以分為兩個部分，設定描邊的透明度和設定元素的透明度。

設定描邊透明度可以使用stroke-opacity屬性，設定元素透明度可以使用fill-opacity屬性。

程式碼例項如下：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/25/181432d26sm2a2aq818qds.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的程式碼分別通過對應的屬性設定了描邊和填充的透明度。

可以看到上述圖片中，邊框和內容有部分割槽域重合了，具體原理參閱SVG繪製1px直線模糊一章節。

相關文章