本节我们来学习如何在 SVG 中绘制椭圆，椭圆和圆形有点像，但是又不一样。圆形只有一个半径，而椭圆 x 轴和 y 轴上的半径不同，所以椭圆就是一个不规则的圆。
如何绘制一个椭圆
在绘制椭圆时， 可以通过 cx 和 cy 属性确定椭圆的圆心，rx 设置椭圆的 x 轴的半径，ry 设置 y 轴的半径。
示例：
例如下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<ellipse cx="100" cy="50" rx="50" ry="30" style="fill:red;"/>
</svg>
</body>
</html>
在浏览器中的演示效果：
上述代码中，我们设置了椭圆的圆心为 (100,50)，水平半径为50，垂直半径为 30。如果将 rx 和 ry 的值设置为相同的值，则会绘制一个规则的圆。
给椭圆设置透明度
如果我们要设置椭圆的透明度，可以使用 opacity 属性，这个属性的取值范围为 0 到 1 之间的小数。
示例：
例如下面这段代码中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<ellipse cx="100" cy="50" rx="50" ry="30" style="fill:none; stroke-width: 3; stroke:#b276be; "></ellipse>
<ellipse cx="150" cy="50" rx="50" ry="30" style="fill:#26c3df; opacity: 0.5;"></ellipse>
</svg>
</body>
</html>
在浏览器中的演示效果：
我们绘制了两个椭圆，其中左边的椭圆没有设置填充颜色，而右边的椭圆填充颜色为蓝色，透明度为 0.5。如果要改变椭圆的位置，只需要改变椭圆的圆心坐标，即
cx 和 cy 属性的值即可。
网友评论