SVG 繪製直線

admin發表於2018-08-04

通過<line>元素可以繪製直線。

先看一段程式碼例項:

[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">
  <line x1="0" y1="10" x2="200" y2="30"
        stroke="red" stroke-width="2" />
</svg>  
</body>
</html>

上面的程式碼繪製了一個傾斜的直線,下面介紹一下<line>元素上的相關屬性。

(1).x1:規定直線起點x軸座標。

(2).y1:規定直線起點y軸座標。

(3).x2:規定直線終點x軸座標。

(4).y2:規定直線終點y軸座標。

(4).stroke:規定直線顏色。

(5).stroke-width:規定直線的寬度。

使用css也可以實現相同的效果。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
line{
  stroke:red;
  stroke-width:2px;
}
</style>
</head>
<body>
<svg width="300" height="200">
  <line x1="0" y1="10"
        x2="200" y2="30"/>
</svg>  
</body>
</html>

特別說明:svg元素的屬性值單位可以省略,預設是畫素。

相關文章