SVG <circle>

SVG 是一种用于描述二维矢量图形的XML标记语言,它可以用来创建各种形状,包括圆形。在本章节中,我们将学习如何在SVG中绘制圆形。

使用<circle>元素绘制圆形

要在SVG中绘制一个圆形,我们可以使用<circle>元素。<circle>元素有三个必需的属性:cx表示圆心的x坐标,cy表示圆心的y坐标,r表示圆的半径。

下面是一个简单的SVG圆形示例:

---- ----------- -------------
  ------- ------- ------- ------ ---------- --
------

在这个示例中,我们创建了一个100x100大小的SVG画布,并在其中绘制了一个圆心坐标为(50,50),半径为40的红色圆形。

修改圆形的样式

除了上面示例中的fill属性用于指定填充颜色外,我们还可以使用其他样式属性来修改圆形的外观,比如stroke用于指定边框颜色,stroke-width用于指定边框宽度等。

下面是一个带有边框的SVG圆形示例:

---- ----------- -------------
  ------- ------- ------- ------ ----------- ------------- ---------------- --
------

在这个示例中,我们创建了一个100x100大小的SVG画布,并在其中绘制了一个圆心坐标为(50,50),半径为40的蓝色圆形,边框宽度为2。

使用<ellipse>元素绘制椭圆

如果我们想要绘制椭圆而不是圆形,可以使用<ellipse>元素。<ellipse>元素有四个必需的属性:cx表示椭圆中心的x坐标,cy表示椭圆中心的y坐标,rx表示椭圆水平半径,ry表示椭圆垂直半径。

下面是一个简单的SVG椭圆示例:

---- ----------- -------------
  -------- ------- ------- ------- ------- ------------ --
------

在这个示例中,我们创建了一个100x100大小的SVG画布,并在其中绘制了一个椭圆中心坐标为(50,50),水平半径为40,垂直半径为20的绿色椭圆。

以上就是关于SVG圆形和椭圆的介绍,希望能帮助你更好地理解SVG的基本形状绘制。在接下来的章节中,我们将继续介绍更多SVG的绘图技巧和应用场景。


上一篇:SVG 矩形
下一篇:SVG 椭圆