SVG的标签通过x、y、width、height绘制矩形，rx和ry控制圆角：仅设rx时ry自动同步，rx/ry超边长一半则被限制，不支持单角圆角需用替代。

SVG 中的 标签用于绘制矩形，它支持通过 rx 和 ry 属性设置圆角，实现从直角矩形到椭圆的平滑过渡。

rect 基本语法与必需属性

是 SVG 的基础图形元素之一，必须指定四个关键属性才能正常显示：

• x：矩形左上角的横坐标（相对于 SVG 画布原点）
• y：矩形左上角的纵坐标
• width：矩形宽度（不能为负）
• height：矩形高度（不能为负）

例如： 会绘制一个宽 100、高 60、左上角在 (10,20) 的矩形。

rx 和 ry：控制圆角大小的核心属性

rx 定义水平方向的圆角半径（X 轴方向），ry 定义垂直方向的圆角半径（Y 轴方向）。两者共同决定圆角形状：

• 只设 rx（如 rx="10"），浏览器会自动将 ry 设为与 rx 相同值，形成标准圆角矩形
• 同时设置 rx 和 ry（如 rx="15" ry="8"），则得到椭圆弧形的角，类似“胶囊”或“跑道”效果
• 若 rx 或 ry 大于对应边长一半（如 width=40 时 rx=30），实际生效值会被限制为边长的一半，避免角重叠

示例：

视觉表现与常见注意事项

圆角效果受 SVG 渲染引擎影响极小，现代浏览器（Chrome、Firefox、Safari、Edge）均一致支持。需注意以下几点：

• 当 rx 和 ry 均为 0 或未设置时，矩形为直角；设为 0 与不设效果相同
• rx 和 ry 支持单位（如 rx="5px" 或 rx="2%"），但推荐使用无单位数值，以保持与 SVG 坐标系统一致
• 若仅想让某几个角带圆角（如左上、右下）， 本身不支持独立控制单个角——此时应改用 手动绘制，或借助 CSS clip-path 配合伪元素等方案

与 CSS border-radius 的区别

虽然视觉目标相似，但 SVG 的 rx/ry 和 CSS 的 border-radius 本质不同：

• 是矢量图形，缩放不失真；CSS 圆角作用于 HTML 元素盒模型，依赖像素渲染
• SVG 圆角是路径的一部分，可参与动画、滤镜、蒙版等高级操作；CSS 圆角无法直接用于 SVG 滤镜输入
• 在响应式 SVG 中，rx/ry 若使用百分比，其计算基准是当前 viewport 或 viewBox 尺寸，而非父容器宽高

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！