rect不显示主因是漏写width或height，二者缺一不可且须为正数；x/y为左上角坐标，非中心点；svg容器需设宽高，否则可能压缩为0×0；fill="none"须显式声明。

rect 标签画不出矩形，大概率是漏了 width 或 height——这两个属性缺一不可，设为 0 或负数也会直接不渲染。

为什么矩形完全不显示

常见错误就是只写了 x、y 和 fill，但没写 width 和 height。浏览器不会报错，也不会 fallback，而是静默忽略整个元素。

• width 和 height 必须是非负数值；width="0" 或 height="-10" 都无效
• x 和 y 是左上角坐标，不是中心点；误当 center 写会导致图形“消失”在画布外
• svg 容器本身没设 width 和 height，可能被压缩成 0×0 区域，导致内部 rect 看不见
• 默认无填充、无描边；fill="none" 要显式写，不能留空或删掉

rx 和 ry 圆角怎么设才生效

圆角不是开关，它受数值和边长双重限制：设了但看不到，往往是因为值超限或逻辑误解。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 只写 rx="12"，ry 会自动同步为 12，得到标准圆角矩形
• 同时写 rx="12" ry="6"，角部变成椭圆弧，适合胶囊形按钮
• 若 width="20" 却设 rx="15"，实际生效值会被截断为 10（即 width / 2），避免角重叠
• rx="0" 和不写 rx 效果一致；rx="-5" 会被忽略，不报错也不渲染

单个角想圆角？rect 不支持

rect 的 rx/ry 是统一控制四个角的，没法单独指定左上或右下。这不是 bug，是规范限制。

• 需要单角/对角圆角时，必须换用 path 手动绘制贝塞尔曲线
• 或者用 CSS clip-path 配合伪元素裁剪，但会失去 SVG 原生缩放优势
• 别尝试用多个 rect 叠加模拟——描边叠加、抗锯齿错位、响应式失真问题会立刻暴露

真正容易被忽略的是：所有坐标都从 SVG 左上角 (0, 0) 开始算起，且 y 增大 = 向下移动。这个原点规则一旦写错，后续所有 rx/ry 调整都只是在错误位置上打补丁。

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