SVG <rect> 繪製矩形

admin發表於2018-08-22
SVG

利用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" 
    width="100" height="60"
    stroke="red" 
    stroke-width="2"
    fill="green"/>
</svg>  
</body>
</html>

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

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

上面成功繪製了一個簡單的矩形框效果，標籤屬性解析如下：

（1）.x：規定矩形左上角x軸座標。

（2）.y：規定矩形左上角y軸座標。

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

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

（5）.stroke：規定邊框的顏色。

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

（7）.stroke-width：規定邊框的寬度。

我們還可以設定矩形的透明度，程式碼例項如下：

[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"
    stroke="red"
    fill="green"
    stroke-width="2"
    fill-opacity="0.5"/>
</svg>  
</body>
</html>

使用fill-opacity屬性即可實現，值介於0-1之間，0表示完全透明，1表示完全不透明。

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

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

svg元素屬性也可以使用對應的css屬性替代，程式碼修改如下：

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

上述程式碼通過CSS實現對<rect>元素的控制，效果相同。

相關文章