17370845950

SVG圆由标签定义，需cx、cy、r三个属性；示例代码绘制中心橙色圆配黑边；支持fill、stroke、opacity、transform等扩展属性实现样式与变换。

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它用文本描述图形的形状、颜色、位置等，放大缩小时不会模糊或失真，适合网页图标、图表、动画和响应式设计。

SVG 圆的基本 XML 结构

画一个圆，核心是 标签，它有三个必需属性：

• cx：圆心横坐标（从左往右的距离）
• cy：圆心纵坐标（从上往下的距离）
• r：半径（单位通常是像素）

一个可直接运行的 SVG 圆示例

把下面这段代码保存为 circle.svg，或直接粘贴进 HTML 文件里就能看到效果：

说明：
– 是容器，设宽高避免显示异常
– 这个圆在画布正中心（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 就能生成清晰、可交互、可缩放的图形。