SVG的标签通过x、y、width、height绘制矩形，rx和ry控制圆角：仅设rx时ry自动同步，rx/ry超边长一半则被限制，不支持单角圆角需用替代。
SVG 中的 <rect></rect> 标签用于绘制矩形，它支持通过 rx 和 ry 属性设置圆角，实现从直角矩形到椭圆的平滑过渡。
rect 基本语法与必需属性
<rect></rect> 是 SVG 的基础图形元素之一，必须指定四个关键属性才能正常显示：
- x：矩形左上角的横坐标（相对于 SVG 画布原点）
- y：矩形左上角的纵坐标
- width：矩形宽度（不能为负）
- height：矩形高度（不能为负）
例如：<rect x="10" y="20" width="100" height="60"></rect> 会绘制一个宽 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），实际生效值会被限制为边长的一半，避免角重叠
示例：<rect x="20" y="30" width="120" height="80" rx="15" ry="10" fill="#4a90e2"></rect>
视觉表现与常见注意事项
圆角效果受 SVG 渲染引擎影响极小，现代浏览器（Chrome、Firefox、Safari、Edge）均一致支持。需注意以下几点：
- 当
rx和ry均为 0 或未设置时，矩形为直角；设为 0 与不设效果相同 -
rx和ry支持单位（如rx="5px"或rx="2%"），但推荐使用无单位数值，以保持与 SVG 坐标系统一致 - 若仅想让某几个角带圆角（如左上、右下），
<rect></rect>本身不支持独立控制单个角——此时应改用<path></path>手动绘制，或借助 CSSclip-path配合伪元素等方案
与 CSS border-radius 的区别
虽然视觉目标相似，但 SVG 的 rx/ry 和 CSS 的 border-radius 本质不同：
-
<rect></rect>是矢量图形，缩放不失真；CSS 圆角作用于 HTML 元素盒模型，依赖像素渲染 - SVG 圆角是路径的一部分，可参与动画、滤镜、蒙版等高级操作；CSS 圆角无法直接用于 SVG 滤镜输入
- 在响应式 SVG 中，
rx/ry若使用百分比，其计算基准是当前 viewport 或viewBox尺寸，而非父容器宽高
