SVG 繪製圓角矩形

admin發表於2018-12-17
SVG

使用<rect>標籤可以繪製矩形效果，具體參閱SVG <rect> 繪製矩形一章節。

此標籤同樣可以繪製帶有圓角的矩形，只需要為標籤新增兩個屬性即可。

首先看一段程式碼例項：

[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"
    height="60" width="100"
    rx="5" ry="5"
    stroke="red"
    fill="green"/>
</svg>  
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/17/164015dgg66sxo2fzzxus2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

利用<rect>標籤成功繪製一個圓角矩形，程式碼分析如下：

（1）.x：規定矩形左上角x軸座標，雖然是圓角矩形，矩形尖角已經不存在，我們不妨認為它依然存在。

（2）.y：規定矩形左上角y軸座標，與x同理。

（3）.width：規定矩形的寬度。

（4）.height：規定矩形的高度。

（5）.stroke：規定矩形描邊的顏色，也就是邊框的顏色。

（6）.fill：規定矩形的填充顏色。

（7）.rx：規定圓角x軸半徑尺寸。

（8）.ry：固定圓角y軸半徑尺寸。

上述程式碼中，rx與ry的值相等，說明矩形的四個圓角是正圓的四分之一部分，由於圖形較小導致觀察比較困難一些，讀者朋友可以自行繪製一個較大的圓角矩形，那麼四個角的特點將十分明顯。

rx與ry值相當，圓角就是正圓的四分之一，如果不相等，那麼圓角將是橢圓的四分之一。

程式碼例項如下：

[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"
    height="60" width="100"
    rx="5" ry="15"
    stroke="red"
    fill="green"/>
</svg>  
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/17/164042wskc1zktyagakzyk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼繪製了一個圓角是橢圓的圓角矩形。

[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"
    height="60" width="100"
    rx="5" ry="15"
    stroke="red"
    fill="green"
    fill-opacity="0.5"/>
</svg>  
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/17/164104zbnvboounzppc4es.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過fill-opacity屬性可以設定元素填充透明度，屬性值介於0-1之間。

0表示完全透明，1表示完全不同命。

同樣的道理，也可以設定描邊，也就是邊框的透明度，stroke-opacity="0.5"。

[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"
    height="60" width="100"
    rx="5" ry="15"
    stroke="rgba(255,0,0,0.5)"
    fill="rgba(125,255,158,0.5)"/>
</svg>  
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/17/164133dvq1iv6dwq1z1wz6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

設定邊框或者填充的透明度沒必要非要使用fill-opacity和stroke-opacity屬性。

只要將fill或者stroke-opacity屬性值設定為帶有透明度效果即可。

關於可以允許的顏色值可以參閱CSS 顏色值型別一章節。

圖案的填充和描邊效果不但可以是顏色值也可以是漸變或者圖案，考慮到篇幅問題，本文不做介紹。

具體可以參閱SVG填充、描邊和透明度一章節。

相關文章