这篇文章将为大家详细讲解有关如何使用SVG中<ellipse>元素画椭圆，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
SVG <ellipse>元素用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说，它在x和y方向上的半径是不同的。
一、SVG椭圆示例
示例（画椭圆 ）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>项目</title> </head> <body style="background-color: aqua; "> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#FF0000" /> </svg> </body> </html>
运行后的结果:
解析：
椭圆cx , cy像圆一样居中。
但是x和y方向上的半径由两个属性（而不是一个）指定：rx和ry属性。就像看到rx 属性具有比该ry属性具有更高的值，从而使椭圆宽于其高度。将rx和ry属性设置为相同的数字将生成圆圈。
1. stroke-width边框宽度设置
可以使用 style属性 stroke-width设置椭圆的边框宽度。
例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;fill: none;" /> </svg>
运行后结果图像:
二、虚线边框椭圆
还可以使用style属性stroke-dasharray使椭圆的笔划变为虚线。
例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5; stroke-dasharray: 10 5;fill: none;" /> </svg>
本示例将虚线宽度设置为10，虚线空间（虚线之间的间隔）设置为5。
这是渲染椭圆时的外观 :
三、透明边框
可以使用style属性stroke-opacity使SVG椭圆的边框变为半透明。
例：
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: none;"></ellipse> <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: #0000ff; stroke-width: 5; stroke-opacity: 0.5; fill: none;"> </ellipse> </svg>
代码运行后SVG椭圆效果如下:
注意
第二个（蓝色）椭圆是透明的，以及如何通过其笔划看到红色的椭圆。
四、椭圆填充
可以使用fill样式属性来填充椭圆。
例：
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: #ff6666;"/> </svg>
运行后SVG椭圆的外观 :
五、填充有透明度
fill-opacity样式属性可被用来设置一个椭圆的填充颜色的不透明度（透明性）。
例：
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: none;"></ellipse> <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: none; fill: #0000ff; fill-opacity: 0.5;"> </ellipse> </svg>
椭圆在渲染时的外观效果图如下:
注意
第二个（蓝色）椭圆是半透明的，从而使红色的椭圆可见。
关于“如何使用SVG中<ellipse>元素画椭圆”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
