最新的Web開發教程
 

SVG <橢圓>


SVG橢圓 - <橢圓>

所述<ellipse>元素被用來創建一個橢圓。

橢圓是密切相關的一個圓。 所不同的是一個橢圓具有彼此不同的X和ay半徑,而圓具有等於x和y半徑:


例1

下面的示例創建一個橢圓:

對不起,您的瀏覽器不支持嵌入式SVG。

下面是SVG代碼:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
試一試»

Code explanation:

  • cx屬性定義橢圓的中心的x坐標
  • cy屬性定義的Y橢圓的中心坐標
  • 所述rx屬性定義了水平半徑
  • ry屬性定義垂直半徑

例2

下面的示例對彼此頂部三個橢圓:

對不起,您的瀏覽器不支持嵌入式SVG。

下面是SVG代碼:

<svg height="150" width="500">
  <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>
試一試»

例3

下面的例子將兩個橢圓(one yellow and one white)

對不起,您的瀏覽器不支持嵌入式SVG。

下面是SVG代碼:

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
試一試»