SVG圆由<circle>标签定义，需cx、cy、r三个属性；示例代码绘制中心橙色圆配黑边；支持fill、stroke、opacity、transform等扩展属性实现样式与变换。
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它用文本描述图形的形状、颜色、位置等，放大缩小时不会模糊或失真，适合网页图标、图表、动画和响应式设计。
SVG 圆的基本 XML 结构
画一个圆，核心是 <circle> 标签，它有三个必需属性：
- cx：圆心横坐标（从左往右的距离）
- cy：圆心纵坐标（从上往下的距离）
- r：半径（单位通常是像素）
一个可直接运行的 SVG 圆示例
把下面这段代码保存为 circle.svg，或直接粘贴进 HTML 文件里就能看到效果：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="orange" stroke="black" stroke-width="2"/>
</svg>
说明：
– <svg> 是容器，设宽高避免显示异常
– 这个圆在画布正中心（100,100），半径 50，橙色填充 + 黑色描边
常用扩展属性（让圆更灵活）
- fill：填充颜色（支持 #ff6b35、red、rgb(255,107,53) 等）
- stroke 和 stroke-width：描边颜色和粗细
- opacity：整体透明度（0～1，如 opacity="0.7"）
- transform：可旋转、缩放、平移，例如 transform="rotate(45 100 100)" 绕中心转 45°
基本上就这些 —— 不需要绘图软件，写几行 XML 就能生成清晰、可交互、可缩放的图形。
