SVG橢圓 - <橢圓>
所述<ellipse>元素被用來創建一個橢圓。
橢圓是密切相關的一個圓。 所不同的是一個橢圓具有彼此不同的X和ay半徑,而圓具有等於x和y半徑:
例1
下面的示例創建一個橢圓:
下面是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 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 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>
試一試»