SVG 圆形学习笔记

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的图形格式，可以用来描述二维矢量图形。其中，圆形是 SVG 中常用的基本形状之一。

创建圆形

在 SVG 中，使用 <circle> 元素来创建圆形，需要设置以下属性：

cx：圆心 x 坐标
cy：圆心 y 坐标
r：半径

例如，下面的代码可以创建一个位于坐标 (50, 50)，半径为 30 的圆形：

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

设置圆形样式

使用 style 属性或者 CSS 样式表来设置圆形的样式，例如颜色、填充、线条等。

下面的代码演示了如何通过 style 属性来设置圆形的填充和边框样式：

htmlCopy Code
<svg>
  <circle cx="50" cy="50" r="30" style="fill: blue; stroke: red; stroke-width: 2px;" />
</svg>

实例展示

下面是一个完整的 SVG 圆形实例，包括创建一个位于坐标 (100, 100)，半径为 50 的蓝色圆形，并在圆形中心显示文字 "Hello World"。

htmlCopy Code
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" style="fill: blue; stroke: red; stroke-width: 2px;" />
  <text x="100" y="110" text-anchor="middle" fill="white">Hello World</text>
</svg>

效果如下：

SVG 圆形实例

以上是 SVG 圆形的学习笔记，希望对你有所帮助。如果你还有其他问题，请继续提出。