SVG繪製直線簡單介紹

admin發表於2018-08-04
SVG

通過<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元素的屬性值單位可以省略，預設是畫素。

相關文章