SVG绘制圆形和椭圆教程

本文深入剖析SVG中绘制圆形与椭圆的常见误区与核心要点，直击90%初学者“画不出、位置偏、图形消失”的根本原因——对SVG坐标系（原点在左上角、Y轴向下为正）和绝对坐标机制的理解偏差；详细拆解cx/cy设置不当导致图形溢出、r或rx/ry缺失/为零引发不可见、不支持百分比单位、旋转时中心偏移等高频问题，并给出可直接复用的解决方案与避坑指南，助你真正掌握SVG图形定位的本质逻辑。

和 的核心差异不在语法复杂度，而在于坐标系理解是否到位——画不出来、位置偏移、图形消失，90% 是因为没意识到 SVG 原点在左上角，且所有数值都是绝对坐标。

为什么 圆心设了却“不见”？

默认 cx 和 cy 都是 0，圆心落在 SVG 左上角；若 r 较大，圆的大部分会溢出画布上边和左边，视觉上像“没画出来”。

• cx、cy 必须显式设置为合理值（例如至少大于 r），否则圆被截断
• r 为负数会被浏览器忽略，设为 0 则渲染成一个像素点，不是“无显示”
• 检查父级 的 width 和 height 是否足够容纳 cx ± r 和 cy ± r
• 不要用 fill="none" 就以为图形消失了——只要加了 stroke，轮廓依然可见

为什么 只写 rx 没反应？

要求 rx 和 ry 同时为正数才可见；漏掉任一属性，对应半轴默认为 0，结果就是一条线或完全不可见。

• rx="50" 但没写 ry → ry 默认为 0 → 椭圆压扁成水平线段（可能看不见）
• rx 和 ry 相等时， 等价于 ，但不推荐混用——语义不清且多写一个属性
• 两者都不支持百分比：rx="50%" 无效；也不接受 em、rem，只认数字或带单位长度（如 rx="2cm"，但需配合 viewBox 才可控缩放）

旋转椭圆/圆形时中心偏移怎么办？

transform="rotate(30)" 默认绕 SVG 原点（左上角）转，不是绕自身中心。要实现“绕自己转”，必须手动平移补偿。

• 正确写法示例：transform="translate(100,80) rotate(45) translate(-100,-80)"（假设圆心是 cx="100" cy="80"）
• 别依赖 CSS 的 transform-origin：SVG 元素对这个属性支持不一致，尤其在嵌套或响应式场景下容易失效
• 如果用了 viewBox，注意所有坐标值都映射进该逻辑坐标系，translate 中的数值也要按比例换算

最常被跳过的细节是：SVG 坐标系 Y 轴向下为正，cy 增大 = 图形往下移；而数学直觉常让人误以为 cy 大了会上移。这点一旦错，整个布局就全偏了。

本篇关于《SVG绘制圆形和椭圆教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！