一篇文章教会你使用SVG画椭圆

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

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、网站制作、宜州网络推广、微信小程序定制开发、宜州网络营销、宜州企业策划、宜州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供宜州建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

一、SVG椭圆示例

示例（画椭圆 ）：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.         
    5. 
  
  
  
  
  5.         项目
    6. 
  
  
  
  
  6.     
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.         
    9. 
  
  
  
  
  9. 
  
  
  
  
  10.         
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.         
    13. 
  
  
  
  
  13.     
    14. 
  
  
  
  
  14.

运行后的结果:

解析：

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

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

1. stroke-width边框宽度设置

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

例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.             
    3. 
  
  
  
  
  3.         
    4.

运行后结果图像:

二、虚线边框椭圆

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

例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.             
  
  
  
  
  3.                  stroke-dasharray: 10 5;fill: none;" />
    4. 
  
  
  
  
  4.         
    5.

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

这是渲染椭圆时的外观 :

三、透明边框

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

例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
  
  
  
  
  3.              style="stroke: #ff0000;
    4. 
  
  
  
  
  4.                    stroke-width: 5;
    5. 
  
  
  
  
  5.                    fill: none;">
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     
  
  
  
  
  8.              style="stroke: #0000ff;
    9. 
  
  
  
  
  9.                    stroke-width: 5;
    10. 
  
  
  
  
  10.                    stroke-opacity: 0.5;
    11. 
  
  
  
  
  11.                    fill: none;">
    12. 
  
  
  
  
  12.     
    13. 
  
  
  
  
  13.

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

注意

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

四、椭圆填充

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

例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.          stroke-width: 5;
    4. 
  
  
  
  
  4.                fill: #ff6666;"/>
    5. 
  
  
  
  
  5.

运行后SVG椭圆的外观 :

五、填充有透明度

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

例：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.             
  
  
  
  
  3.                        stroke-width: 5;
    4. 
  
  
  
  
  4.                        fill: none;">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.             
  
  
  
  
  7.                        fill: #0000ff;
    8. 
  
  
  
  
  8.                        fill-opacity: 0.5;">
    9. 
  
  
  
  
  9.       
    10. 
  
  
  
  
  10.         
    11.

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

注意

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

六、总结

本文基于SVG 基础，利用SVG画不同样式的椭圆，透明边框，椭圆填充，添加填充透明度。以及在实际开发项目中需要注意的点，遇到的一些难点， 都提供了一些有效等等解决方案。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望能够帮助读者更好的去学习SVG。

本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

分享文章：一篇文章教会你使用SVG画椭圆
URL网址：http://www.shufengxianlan.com/qtweb/news8/285358.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站策划知识

分类信息网

成都网络公司　　 　乐山主机托管　　 　成都商城开发　　 　网站空间　　 　成都二枢机房　　 　乐山中领科信　　 　成都外贸网站建设公司　　 　广汉锦华橡塑　　 　定制级高端网站建设　　 　成都雨棚定制　　 　都江堰做网站　　 　双流网站建设　　 　香港空间　　 　成都网站制作　　 　成都网络公司　　 　云锦斋建筑　　 　成都租用服务器　　 　江油网站建设　　 　小程序开发　　 　和正源建设