rx和ry属性有什么用_HTML SVG圆角矩形曲率调整指南-html教程-PHP中文网

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

rx和ry属性有什么用_html svg圆角矩形曲率调整指南

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

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

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

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

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

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

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

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

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