如何使用SVG中<ellipse>元素画椭圆

这篇文章将为大家详细讲解有关如何使用SVG中元素画椭圆，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、虚拟空间、营销软件、网站建设、广西网站维护、网站推广。

SVG 元素用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说，它在x和y方向上的半径是不同的。

一、SVG椭圆示例

示例（画椭圆 ）：

运行后的结果:

解析：

椭圆cx , cy像圆一样居中。

但是x和y方向上的半径由两个属性（而不是一个）指定：rx和ry属性。就像看到rx 属性具有比该ry属性具有更高的值，从而使椭圆宽于其高度。将rx和ry属性设置为相同的数字将生成圆圈。

1. stroke-width边框宽度设置

可以使用 style属性 stroke-width设置椭圆的边框宽度。

例：

运行后结果图像:

二、虚线边框椭圆

还可以使用style属性stroke-dasharray使椭圆的笔划变为虚线。

例：

本示例将虚线宽度设置为10，虚线空间（虚线之间的间隔）设置为5。

这是渲染椭圆时的外观 :

三、透明边框

可以使用style属性stroke-opacity使SVG椭圆的边框变为半透明。

例：

代码运行后SVG椭圆效果如下:

注意

第二个（蓝色）椭圆是透明的，以及如何通过其笔划看到红色的椭圆。

四、椭圆填充

可以使用fill样式属性来填充椭圆。

例：

运行后SVG椭圆的外观 :

五、填充有透明度

fill-opacity样式属性可被用来设置一个椭圆的填充颜色的不透明度（透明性）。

例：

椭圆在渲染时的外观效果图如下:

注意

第二个（蓝色）椭圆是半透明的，从而使红色的椭圆可见。

关于“如何使用SVG中元素画椭圆”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。