SVG <ellipse> 繪製橢圓
橢圓可以認為是特殊的圓,兩頭較扁一些。
如果要繪製整圓可以參閱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>
程式碼執行效果截圖如下:
上述程式碼繪製了一個紅色邊框的橢圓,程式碼分析如下:
(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>
程式碼執行效果截圖如下:
上述程式碼利用<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設定橢圓的描邊和填充等效果。
相關文章
- CSS繪製橢圓程式碼CSS
- SVG 繪製圓角矩形SVG
- SVG <circle> 繪製圓形SVG
- 一分鐘教程-超橢圓快速繪製
- CAD繪圖工具——橢圓繪圖
- Python 在PDF中繪製線條、矩形、橢圓形Python
- 【Openxml】將Openxml的橢圓弧線arcTo轉為Svg的橢圓弧線XMLSVG
- Python中OpenCV劃線、畫圓、橢圓、新增文字等幾何圖形繪製操作PythonOpenCV
- SVG <text>繪製文字SVG
- SVG <rect> 繪製矩形SVG
- SVG 繪製直線SVG
- 根據SVG Arc求出其開始角、擺動角和橢圓圓心SVG
- WEBGL橢圓Web
- SVG <polyline> 繪製折線SVG
- SVG繪製餅狀圖SVG
- 一般橢圓方程和平移橢圓方程
- SVG基礎知識 Adobe Illustrator繪製SVGSVG
- canvas 繪製圓形Canvas
- iOS 繪製圓角iOS
- CSS 繪製半圓CSS
- CSS 繪製圓環CSS
- SVG <path> 元素A指令繪製弧線SVG
- canvas 繪製圓角矩形Canvas
- python繪製圓柱體Python
- SVG繪製直線簡單介紹SVG
- canvas繪製不重合的圓Canvas
- canvas 繪製立體圓環Canvas
- SVG拖動繪製矩形程式碼例項SVG
- svg02——svg繪製基本圖形,瞭解常用的屬性SVG
- 使用canvas繪製圓弧動畫Canvas動畫
- canvas繪製多個圓圈效果Canvas
- css3 繪製畫圓、扇形CSSS3
- CAD橢圓弧命令如何使用
- SVG繪製1px直線模糊問題SVG
- Canvas 繪製 3d 圓柱體Canvas3D
- css繪製圓形程式碼例項CSS
- 使用canvas繪製圓形進度條Canvas
- CSS橢圓效果程式碼例項CSS