<ellipse> 標籤可用來創建橢圓。
<ellipse> 標籤
<ellipse> 標籤可用來創建橢圓。橢圓與圓很相似。不同之處在於橢圓有不同的 x 和 y 半徑,而圓的 x 和 y 半徑是相同的。
請把下面的代碼拷貝到記事本,然後把文件保存爲 "ellipse1.svg"。把此文件放入您的 web 目錄:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/> </svg>
代碼解釋:
- cx 屬性定義圓點的 x 座標
- cy 屬性定義圓點的 y 座標
- rx 屬性定義水平半徑
- ry 屬性定義垂直半徑
下面的例子創建了三個累疊而上的橢圓:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/> </svg>
下面的例子組合了兩個橢圓(一個黃的和一個白的):
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:yellow"/> <ellipse cx="220" cy="100" rx="190" ry="20" style="fill:white"/> </svg>