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 就能生成清晰、可交互、可缩放的图形。










