HTML5svg标签circle元素怎么用_圆形绘制教程【教程】

元素绘制圆必须设置cx、cy、r三个属性，缺一不可；cx/cy为圆心坐标（原点在左上角），r为正半径；未设fill或stroke则透明；transform需用svg原生属性而非css。

元素本身不“用教程”也能画圆——它只要三个属性就成：cx、cy、r。缺一不可，少一个就看不见。

必须填的三个属性：cx、cy、r

SVG 坐标系原点在左上角，cx 和 cy 是圆心横纵坐标，r 是半径（不能为 0 或负数）：

• cx/cy 不写默认是 0，圆心跑出画布，看不见
• r 为 0 渲染为空（不是小点），为负数直接被浏览器忽略
• 没设 fill 或 stroke，圆会透明——不是没画，是没颜色

fill 和 stroke 别混用，也别漏设

纯色填充用 fill，描边用 stroke，两者可共存。但常见错误是只写 color（CSS 属性）或 style="color: red"——SVG 里无效：

• stroke-width 默认是 1，单位是用户坐标（不是 px），不设就是细线
• fill="none" 表示透明填充，此时若没 stroke 就真看不见
• 用 fill="url(#grad)" 可引用渐变，但要先定义 ，否则报错但不提示

和 CSS 的 transform 冲突很隐蔽

如果给 直接加 style="transform: translateX(20px)"，多数浏览器会忽略——SVG 元素响应的是 transform 属性，不是 CSS 的：

立即学习“前端免费学习笔记（深入）”；

• transform 属性值语法和 CSS 类似，但不支持 rotateZ() 这种写法，只认 rotate(45)
• 多个变换空格分隔：transform="translate(10,20) rotate(30) scale(0.8)"
• 若父 已有 transform，子 的会叠加，容易偏移过头

真正容易卡住的不是怎么画圆，而是圆画出来却“消失”——八成是 cx/cy 超出 宽高范围，或 r 太大裁剪掉了。打开浏览器开发者工具，选中 ，看 computed 样式里 cx、cy、r 解析值是否符合预期，比猜快得多。