当前位置：主页 > 查看内容

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

发布时间：2021-09-24 00:00| 有 位朋友查看

简介：SVG ellipse元素用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说，它在x和y方向上的半径是不同的。 一、SVG椭圆示例 示例（画椭圆 ）： !DOCTYPEhtml html head metacharset= utf-8 title项目/title /head bodystyle= background-color:aqua; svgxmlns=……

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

一、SVG椭圆示例

示例（画椭圆 ）：

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>项目</title> 
  6.     </head> 
  7.     <body style="background-color: aqua; "> 
  8.         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  9.  
  10.         <ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#FF0000" /> 
  11.  
  12.         </svg> 
  13.     </body> 
  14. </html> 

运行后的结果:

解析：

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

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

1. stroke-width边框宽度设置

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

例：

  1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  2.             <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;fill: none;" /> 
  3.         </svg> 

运行后结果图像:

二、虚线边框椭圆

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

例：

  1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  2.             <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5; 
  3.                  stroke-dasharray: 10 5;fill: none;" /> 
  4.         </svg> 

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

这是渲染椭圆时的外观 :

三、透明边框

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

例：

  1. <svg height="120"> 
  2.     <ellipse cx="50" cy="50" rx="40" ry="30" 
  3.              style="stroke: #ff0000; 
  4.                    stroke-width: 5; 
  5.                    fill: none;"></ellipse> 
  6.  
  7.     <ellipse cx="60" cy="60" rx="40" ry="30" 
  8.              style="stroke: #0000ff; 
  9.                    stroke-width: 5; 
  10.                    stroke-opacity: 0.5; 
  11.                    fill: none;"> 
  12.     </ellipse> 
  13. </svg> 

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

注意

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

四、椭圆填充

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

例：

  1. <svg height="120"> 
  2. <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; 
  3.          stroke-width: 5; 
  4.                fill: #ff6666;"/> 
  5. </svg> 

运行后SVG椭圆的外观 :

五、填充有透明度

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

例：

  1. <svg height="120"> 
  2.             <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; 
  3.                        stroke-width: 5; 
  4.                        fill: none;"></ellipse> 
  5.  
  6.             <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: none; 
  7.                        fill: #0000ff; 
  8.                        fill-opacity: 0.5;"> 
  9.       </ellipse> 
  10.         </svg> 

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

注意

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

六、总结

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

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

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

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


本文转载自网络，原文链接：https://mp.weixin.qq.com/s/w-Y-Y4DBlghVDsLoxws96Q
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：用了这么久的RabbitMQ异步编程竟然都是错的! 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐