元素绘制圆必须设置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 太大裁剪掉了。打开浏览器开发者工具，选中 cx、cy、r 解析值是否符合预期，比猜快得多。
