rx 和 ry 控制 SVG <rect> 元素的圆角半径，分别对应水平与垂直方向；值越大角越圆，为 0 或省略则为直角；二者独立可调，非数学曲率。

rx 和 ry 控制的是 <rect> 元素四个角的圆滑程度，不是“曲率”而是“圆角半径”——值越大，角越圆；设为 0 或省略，就是直角。

rx 和 ry 在 SVG <rect> 中的实际作用

它们分别定义矩形在 x 轴和 y 轴方向上的圆角半径。注意：这不是数学意义上的曲率（curvature），而是两个正交方向上独立可调的圆弧半径。

• rx 决定左右两边角的水平半径（即沿宽度方向）
• ry 决定上下两边角的垂直半径（即沿高度方向）
• 若只写 rx、不写 ry，浏览器会自动把 ry 设为和 rx 相同的值（但反之不成立）
• 当 rx 或 ry 超过对应边长一半时，浏览器会自动截断为该方向最大允许值（比如 width/2），不会报错也不会溢出

常见错误：圆角没生效？检查这几点

很多情况下写了 rx 却看不到圆角，问题往往不在属性本身。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 父容器或 CSS 设置了 overflow: hidden，而圆角部分被裁剪了
• 使用了 transform: scale() 或其他缩放，导致 rx/ry 值被缩放后视觉失真（建议用 viewBox + 缩放容器，而非直接缩放 <rect>）
• 在 AntV X6 等可视化库中误以为 rx 是全局配置项，其实它只对矩形节点生效；椭圆节点要用 rx/ry 但含义不同（那是椭圆半轴）
• React 或 Vue 模板里写成 rx="{{value}}" 却忘了加引号或绑定语法，导致属性未被解析为数字

rx 和 ry 的取值边界与兼容性

数值类型支持无单位数字（像素）、百分比（如 rx="10%"）、em 等，但百分比是相对于当前 <rect> 的 width 或 height 计算的，不是父 SVG 宽高。

立即学习“前端免费学习笔记（深入）”；

• IE 不支持百分比 rx/ry（仅接受数字），如需兼容需预计算为像素值
• rx="0" 和完全不写 rx 效果一致，但显式写 0 更利于动态控制（比如用 JS 切换圆角开关）
• 设 rx="50%" 且 width 为偶数时，可能得到完美圆形角；但若 width 是奇数，浏览器会向下取整，实际半径略小
• 动画 rx 时，推荐用 CSS transition 或 SMIL（<animate attributeName="rx">），不要依赖 JS 频繁重设属性——重绘开销大且易卡顿

真正容易被忽略的是：当你在响应式 SVG 里用百分比 rx，而 <rect> 的 width/height 是通过 CSS 设置的，此时 SVG 渲染引擎可能拿不到准确尺寸，rx="10%" 就会失效或取值异常——这种场景下，老老实实用 JS 获取 getBBox() 后再设像素值更稳。