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>
试一试»