<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>

效果圖：

(6)SVG中所用到的形狀簡介------橢圓