如何使用SVG画圆形

小编给大家分享一下如何使用SVG画圆形，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

一、绘制圆形

1. SVG 命名空间

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

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

2. SVG 元素用于绘制圆。

运行结果：

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

二、圆形描边

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

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

示例

运行后圆圈的外观:
可以使用stroke-dasharray属性以虚线绘制边框。
渲染后的外观 :
删除圆的边框（轮廓），仅用填充颜色填充圆。
没有边框的圆运行后效果如下:
三、Circle 填充
该fill样式属性控制圈的填充方式。通过将fill属性设置为，可以选择完全不填充none。示例如下:
这是没有填充的圆的外观
使用fill 属性设置填充颜色。
代码如下：
绘制圆并填充颜色的外观如下:
使用fill-opacity style属性将填充设置为透明。以下示例绘制了两个圆，一个圆部分位于另一个圆的上方，并且是半透明的。
例
运行效果如下:
蓝色（右）圆圈现在在内部是半透明的。要使笔划也为半透明，则必须使用stroke-opacitystyle属性。
以上是"如何使用SVG画圆形"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！