SVG 圆

简介

SVG 圆是一种用于创建圆形的标记语言。它是可伸缩矢量图形（Scalable Vector Graphics）的一部分，允许以XML格式描述二维图形。

SVG 圆可以用于创建自定义图形、图表、动画、图标等等。它可以直接嵌入HTML文档中，并支持指定颜色、边框等各种样式属性。

语法

创建 SVG 圆需要以下标签：

<svg>
  <circle cx="x" cy="y" r="radius" />
</svg>

其中：

• cx：表示圆心的 x 坐标
• cy：表示圆心的 y 坐标
• r：表示圆的半径

例如：

<svg>
  <circle cx="50" cy="50" r="30" />
</svg>

这个例子将在 (50, 50) 的位置绘制一个半径为 30 的圆。

属性

SVG 圆支持以下属性：

• cx：表示圆心的 x 坐标
• cy：表示圆心的 y 坐标
• r：表示圆的半径
• fill：表示圆的填充颜色，默认为黑色
• stroke：表示圆的描边颜色
• stroke-width：表示圆的描边宽度
• opacity：表示圆的透明度

实例

基本圆

<svg>
  <circle cx="50" cy="50" r="30" />
</svg>

填充及描边

<svg>
  <circle cx="50" cy="50" r="30" fill="yellow" stroke="green" stroke-width="3" />
</svg>

半透明圆

<svg>
  <circle cx="50" cy="50" r="30" fill="blue" opacity="0.5" />
</svg>

总结

SVG 圆可以用于创建各种图形。通过指定圆心、半径等属性，可以创建不同样式和大小的圆。此外，还可以通过填充、描边、透明度等属性来定制圆的外观。