HTML5SVG画圆教程详解

本文深入解析HTML5 SVG中绘制圆圈的核心要点，直击开发者常踩的“圆画不出来”痛点：强调cx、cy、r三个属性缺一不可，揭示原点在左上角、半径不能为零或负数、未设fill/stroke即透明等关键规则；澄清fill与stroke的正确用法，指出CSS color和transform在SVG中的失效陷阱，并详解SVG原生transform的语法限制与叠加逻辑；最后给出实用调试建议——善用浏览器开发者工具检查实际解析值，快速定位因坐标越界、半径溢出或裁剪导致的“消失”问题，让SVG绘图从玄学变可控。

元素本身不“用教程”也能画圆——它只要三个属性就成：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)" 可引用渐变，但要先定义 ，否则报错但不提示

和 CSS 的 transform 冲突很隐蔽

如果给 直接加 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)"
• 若父 已有 transform，子 的会叠加，容易偏移过头

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

终于介绍完啦！小伙伴们，这篇关于《HTML5SVG画圆教程详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！