<circle>元素绘制圆必须设置cx、cy、r三个属性，缺一不可；cx/cy为圆心坐标（原点在左上角），r为正半径；未设fill或stroke则透明；transform需用SVG原生属性而非CSS。
<circle> 元素本身不“用教程”也能画圆——它只要三个属性就成：cx、cy、r。缺一不可，少一个就看不见。
必须填的三个属性：cx、cy、r
SVG 坐标系原点在左上角，cx 和 cy 是圆心横纵坐标，r 是半径（不能为 0 或负数）：
<svg width="200" height="200"> <circle cx="100" cy="100" r="40" fill="blue" /> </svg>
-
cx/cy不写默认是 0，圆心跑出画布，看不见 -
r为 0 渲染为空（不是小点），为负数直接被浏览器忽略 - 没设
fill或stroke，圆会透明——不是没画，是没颜色
fill 和 stroke 别混用，也别漏设
纯色填充用 fill，描边用 stroke，两者可共存。但常见错误是只写 color（CSS 属性）或 style="color: red"——SVG 里无效：
<circle cx="60" cy="60" r="25" fill="red" stroke="black" stroke-width="2" />
-
stroke-width默认是 1，单位是用户坐标（不是 px），不设就是细线 -
fill="none"表示透明填充，此时若没stroke就真看不见 - 用
fill="url(#grad)"可引用渐变，但要先定义<defs>，否则报错但不提示
和 CSS 的 transform 冲突很隐蔽
如果给 <circle> 直接加 style="transform: translateX(20px)"，多数浏览器会忽略——SVG 元素响应的是 transform 属性，不是 CSS 的：
立即学习“前端免费学习笔记（深入）”；
<circle cx="50" cy="50" r="20" fill="green" transform="translate(30, 10) scale(1.2)" />
-
transform属性值语法和 CSS 类似，但不支持rotateZ()这种写法，只认rotate(45) - 多个变换空格分隔：
transform="translate(10,20) rotate(30) scale(0.8)" - 若父
<g>已有transform，子<circle>的会叠加，容易偏移过头
真正容易卡住的不是怎么画圆，而是圆画出来却“消失”——八成是 cx/cy 超出 <svg> 宽高范围，或 r 太大裁剪掉了。打开浏览器开发者工具，选中 <circle>，看 computed 样式里 cx、cy、r 解析值是否符合预期，比猜快得多。
