画不出来是因为cx、cy、r三个属性缺一不可，未设置则浏览器完全不渲染；cx/cy默认为0导致圆心在左上角易溢出，r为负数或非法值会被静默忽略，r=0时仅渲染为一个点。
为什么<circle></circle>画不出来？三个属性缺一不可
浏览器根本不会渲染一个没设 cx、cy 或 r 的 <circle></circle>。它不是“画得小”，是压根不画。
常见错误现象：
-
cx和cy没写 → 圆心默认为(0, 0)，圆从左上角开始画，r 稍大就全溢出画布 -
r设为负数或字符串（如"50px"）→ 浏览器静默忽略该元素，控制台无报错 -
r="0"→ 渲染为一个不可见的点（不是透明，是几何退化）
实操建议：
- 先固定
<svg></svg>宽高，比如<svg width="200" height="200"></svg> - 再让圆居中：设
cx="100" cy="100" r="80"（确保cx ± r和cy ± r都落在0–200范围内） - 别依赖默认值；哪怕想画在左上角，也显式写
cx="40" cy="40" r="30"，避免误判
fill 和 stroke 不生效？别混用 CSS 样式写法
<circle></circle> 只认 SVG 原生属性，style="color: red" 或 style="background: blue" 完全无效。
使用场景：
- 纯色填充 → 用
fill="red"或fill="#333"，不是color - 描边 → 必须同时设
stroke="black"和stroke-width="2"，只设stroke会出极细线（默认宽度为 1） - 透明填充 →
fill="none"（字符串"none"，不是布尔值false或空字符串） - 渐变填充 →
fill="url(#myGradient)"，但必须提前在<defs></defs>里定义好<lineargradient></lineargradient>
容易踩的坑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 写了
fill="none"又没设stroke→ 圆形完全不可见（不是 bug，是预期行为） - 把
stroke-width写成strokeWidth（驼峰）→ 属性名大小写敏感，必须全小写
坐标系搞反了？SVG 的 cy 越大越往下
SVG Y 轴正方向是向下的，和数学坐标系相反。cy="150" 表示圆心离顶部 150 像素，不是离底部。
性能 / 兼容性影响：
- 所有数值单位默认是用户坐标（通常等同于 px），不支持
%、em、rem - 若用了
viewBox="0 0 100 100"，则cx="50"是逻辑坐标的 50%，但数值本身仍是纯数字，不是百分比字符串 - 嵌套
<g transform="translate(20,30)"></g>时，子<circle cx="10" cy="10"></circle>实际位置是(30, 40)，叠加计算容易偏移过头
实操建议：
- 调试时右键检查元素，在开发者工具里直接看 computed 的
cx、cy、r值，比肉眼猜快得多 - 想让圆随容器缩放又不失真？优先用
viewBox+ 无单位数值，别硬写width="100%"后再算像素
想旋转/移动圆形？别用 CSS transform
style="transform: rotate(45deg)" 对 <circle></circle> 大概率无效。SVG 元素响应的是原生 transform 属性，不是 CSS 的。
参数差异：
- 正确写法：
transform="rotate(45 100 80)"表示绕点(100, 80)旋转 45 度（注意空格分隔，且中心点是可选参数） - 等价写法：
transform="translate(100,80) rotate(45) translate(-100,-80)"，适合动态 JS 拼接 - 多个变换用空格连接：
transform="scale(1.2) translate(5, -10)"，顺序很重要，先缩放后平移和先平移后缩放结果不同
容易被忽略的地方：
-
transform-origin在 SVG 中支持有限，尤其在嵌套<g></g>或使用viewBox时行为不一致 - 如果父级
<g></g>已有transform，子<circle></circle>的transform会叠加，不是覆盖 —— 这是多数“转歪了”的根源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
