SVG <circle> 繪製圓形

admin發表於2018-09-21
SVG

利用SVG的<circle>標籤可以繪製圓形圖案。

使用<ellipse>標籤可以繪製橢圓，它是一個特殊的圓。

將其橢圓x軸半徑與y軸半徑設定為相同時，就是一個正圓，與<circle>繪製效果相同。

關於<ellipse>繪製原型可以參閱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">
  <circle 
    cx="40" cy="40" 
    r="24" 
    stroke="red" 
    stroke-width="2"
    fill="green"/>
</svg>  
</body>
</html>

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

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

上述程式碼利用<circle>繪製了一個紅色邊框綠色填充的圓，程式碼分析如下：

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

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

（3）.r：規定半徑的尺寸。

（4）.stroke：規定圓的描邊也就是邊框的寬度。

（5）.fill：規定圓的填充顏色。

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

也可以使用與<circle>元素屬性對應的css屬性來設定相關樣式。

相關文章