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

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

[[384706]]

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

一、绘制圆形

1. SVG 命名空间

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

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

2. SVG <circle>元素用于绘制圆。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"
  6. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  7.  
  8. <circle cx="60" cy="60" r="26" style="stroke:#006600; fill:#FF0000" /> 
  9.  
  10. </svg> 
  11. </body> 
  12. </html> 

运行结果:

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

二、圆形描边

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

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

示例

  1. <svg height="80px"
  2. <circle cx="40" cy="40" r="24" style="stroke:#006600; 
  3.      stroke-width: 3; 
  4.      fill:#FF0000" 

运行后圆圈的外观:

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

  1. <svg height="80px"><circle cx="40" cy="40" r="24" 
  2.    style="stroke:#006600; 
  3.           stroke-width: 3; 
  4.           stroke-dasharray: 10 5; 
  5.           fill:#FF0000"/> 
  6. </svg> 

渲染后的外观 :

删除圆的边框(轮廓),仅用填充颜色填充圆。

  1. <svg height="80px"><circle cx="40" cy="40" r="24" 
  2.    style="stroke: none; 
  3.           fill:#FF0000"/> 
  4. </svg> 

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

三、Circle 填充

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

  1. <svg height="80px"><circle cx="40" cy="40" r="24" 
  2.    style="stroke: #660066; 
  3.           fill: none"/> 
  4. </svg> 

这是没有填充的圆的外观

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

代码如下:

  1. <svg height="80px"><circle cx="40" cy="40" r="24" 
  2.    style="stroke: #660066; 
  3.           fill: #FF0000"/> 
  4. </svg> 

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

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

  1. <svg height="80px"
  2.    <circle cx="40" cy="40" r="24" style="stroke: #660000; 
  3.                   fill: #cc0000; 
  4.            "></circle> 
  5.    <circle cx="64" cy="40" r="24" style="stroke: #000099; 
  6.                   fill: #0000cc; 
  7.                   fill-opacity: 0.5; 
  8.            "></circle> 
  9. </svg> 

运行效果如下:

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

四、总结

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

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

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

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

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2021-02-19 19:35:53

SVG 形状元素

2021-02-17 20:40:22

SVG图像模式

2020-12-01 09:36:35

SVG元素属性

2021-03-19 10:01:41

SVG画多边形Htm基础

2019-10-17 19:15:22

jQueryJavaScript前端

2021-12-28 09:27:45

Javascript 高阶函数前端

2023-06-21 00:10:17

JSONWeb服务器JavaScript

2020-11-13 08:14:28

JavaScript

2021-09-15 10:00:33

Go语言Modules

2021-05-29 10:20:54

GoModules语言

2021-12-30 10:28:30

Python 微博评论

2020-12-16 08:07:28

语言基础反射

2020-12-10 08:20:27

Python微博评论

2021-02-24 10:14:04

PythonClassPython基础

2021-02-26 20:01:57

SVG滤镜元素

2020-12-08 08:09:49

SVG图标Web

2020-12-31 08:35:07

Python抖音浏览器

2022-05-13 16:21:38

javascrip脚本SVG

2021-03-26 09:57:51

SVGHtml基础SVG图像

2021-02-05 18:36:15

SVG形状属性
点赞
收藏

51CTO技术栈公众号