SVG <ellipse> 繪製橢圓

admin發表於2018-12-16
原文網址 : https://www.softwhy.com/article-9732-1.html
SVG

橢圓可以認為是特殊的圓，兩頭較扁一些。

如果要繪製整圓可以參閱SVG 繪製圓形一章節。

SVG內建了繪製橢圓的標籤，使用<ellipse>即可實現繪製功能。

程式碼例項如下：

[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">
  <ellipse 
    cx="40" cy="40"
    rx="30" ry="15"
    stroke="red"
    fill="green"
    stroke-width="2"/>
</svg>  
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/16/132725owa0t2awom00wh34.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了一個紅色邊框的橢圓，程式碼分析如下：

（1）.cx：規定橢圓圓心x軸座標。

（2）.cy：規定橢圓圓心y軸座標。

（3）.rx：規定橢圓x軸半徑的尺寸。

（4）.ry：規定橢圓y軸半徑的尺寸。

（5）.stroke：規定橢圓描邊的顏色，也就邊框的顏色。

（6）.stroke-width：規定描邊的厚度為2px，也就是邊框的厚度。

（7）.fill：規定橢圓的填充顏色為綠色。

[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">
  <ellipse 
    cx="40" cy="40"
    rx="30" ry="30"
    stroke="red"
    fill="green"
    stroke-width="2"/>
</svg>  
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/16/132755t55g05hqj5g5yqcq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼利用<ellipse>標籤繪製了一個正圓。

非常簡單，只要將rx與ry屬性值設定為相同即可。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ellipse {
  stroke:red;
  stroke-width:2px;
  fill:green;
}
</style>
</head>
<body>
<svg width="300" height="200">
  <ellipse 
    cx="40" cy="40"
    rx="30" ry="30"/>
</svg>  
</body>
</html>

上述程式碼通過css設定橢圓的描邊和填充等效果。

相關文章