美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

SVG  元素是一个SVG的基本形状，用来创建圆,基于一个圆心和一个半径，同时可以利用stroke和fill属性对圆进行实线描边，虚线描边以及圆形的颜色填充等。

目前创新互联建站已为上千多家的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、南和网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、绘制圆形

1. SVG 命名空间

 
 
 
 
    
  
  
  
  
  1. # xmlns="http://www.w3.org/2000/svg"
    2. 
  
  
  
  
  2. # xmlns:xlink="http://www.w3.org/1999/xlink"
    3.

这是XML链接语言[（XLink）规范中定义的XML命名空间。有关 XML 的信息，请参阅可扩展[标记语言 （XML） 1.0 规范。

2. SVG 元素用于绘制圆。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. 项目
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
    7. 
  
  
  
  
  7. 
  
  
  
  
    9. 
  
  
  
  
  9. 
  
  
  
  
  10. 
  
  
  
  
  11. 
  
  
  
  
  12.

运行结果：

该圆以点cx , cy为圆心，半径为r。cx，cy 和r是元素的属性。

二、圆形描边

使用SVG stroke样式属性设置SVG圆的笔触（轮廓）。

笔划设置为#006600深绿色。但是，不仅可以设置笔触颜色，还可以设置更多。还可以使用stroke-widthstyle属性设置笔触宽度 。

示例

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.      stroke-width: 3;
    4. 
  
  
  
  
  4.      fill:#FF0000"
    5.

运行后圆圈的外观:

可以使用stroke-dasharray属性以虚线绘制边框。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.    style="stroke:#006600;
    3. 
  
  
  
  
  3.           stroke-width: 3;
    4. 
  
  
  
  
  4.           stroke-dasharray: 10 5;
    5. 
  
  
  
  
  5.           fill:#FF0000"/>
    6. 
  
  
  
  
  6.

渲染后的外观 :

删除圆的边框（轮廓），仅用填充颜色填充圆。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.    style="stroke: none;
    3. 
  
  
  
  
  3.           fill:#FF0000"/>
    4. 
  
  
  
  
  4.

没有边框的圆运行后效果如下:

三、Circle 填充

该fill样式属性控制圈的填充方式。通过将fill属性设置为，可以选择完全不填充none。示例如下:

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.    style="stroke: #660066;
    3. 
  
  
  
  
  3.           fill: none"/>
    4. 
  
  
  
  
  4.

这是没有填充的圆的外观

使用fill 属性设置填充颜色。

代码如下：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.    style="stroke: #660066;
    3. 
  
  
  
  
  3.           fill: #FF0000"/>
    4. 
  
  
  
  
  4.

绘制圆并填充颜色的外观如下:

使用fill-opacity style属性将填充设置为透明。以下示例绘制了两个圆，一个圆部分位于另一个圆的上方，并且是半透明的。

例

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.    
  
  
  
  
  3.                   fill: #cc0000;
    4. 
  
  
  
  
  4.            ">
    5. 
  
  
  
  
  5.    
  
  
  
  
  6.                   fill: #0000cc;
    7. 
  
  
  
  
  7.                   fill-opacity: 0.5;
    8. 
  
  
  
  
  8.            ">
    9. 
  
  
  
  
  9.

运行效果如下:

蓝色（右）圆圈现在在内部是半透明的。要使笔划也为半透明，则必须使用stroke-opacitystyle属性。

四、总结

本文基于Html基础，利用SVG画不一样的圆形，添加不一样的效果。以及在实际开发项目中需要注意的点，遇到的一些难点， 都提供了一些有效等等解决方案。

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

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

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


网站栏目：一篇文章教会你使用SVG画圆形
文章来源：http://www.zsjierui.cn/article/cccisco.html

其他资讯