rect元素必须同时指定x、y、width、height四个属性才能显示，缺一不可；width和height须为正数，否则不渲染；rx/ry圆角受边长限制，超出则自动截断；fill="none"需显式声明。

rect 元素必须同时指定 width 和 height 才能显示，漏掉任一属性就完全不可见——哪怕 fill 写了也没用。

为什么矩形没出现？检查这四个必需属性

rect 是 SVG 中最基础的形状，但它不像 CSS 那样有默认尺寸。浏览器只认四个硬性条件：

• x 和 y：左上角坐标（不是中心点，别按 div 的思维写）
• width 和 height：必须为非负数值；设为 0 或负数会直接不渲染
• 没有 fill 或 stroke 不代表“透明”，而是默认无填充、无描边——看起来就是空白
• svg 容器本身也要有明确的 width 和 height，否则可能被压缩成 0×0 区域

rx 和 ry 圆角怎么设才生效

圆角不是“开关式”功能，它受数值和边长双重限制：

Article To Html

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

下载

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

fill 和 stroke 的绘制顺序与边界行为

描边不是“贴着边画线”，而是以矩形边界为中心向内外各延伸一半宽度：

• 当 stroke-width="4" 时，2px 向外、2px 向内，整体图形视觉尺寸比 width/height 大出 4px
• stroke 始终绘制在 fill 之上，无法通过 z-index 调整层级
• 若只要描边不要填充，fill="none" 必须显式写出，不能留空或删掉
• fill-opacity 和 stroke-opacity 独立控制，互不影响

真正容易被忽略的是坐标系原点——所有 x/y 都从 SVG 左上角 (0, 0) 开始算起，且 y 值增大是向下移动。这不是 bug，是 SVG 规范定义，但新手常在这里反复调错位置。

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