SVG <rect> 元素最全实战手册（2025 版）
1. 基本语法（记住这一行就够用 90% 场景）
<rect x="左上角X" y="左上角Y" width="宽度" height="高度" />2. 所有属性完整速查表
| 属性 | 含义 | 常用值 | 示例 |
|---|---|---|---|
| x | 左上角 X 坐标 | 0（默认） | x=”20″ |
| y | 左上角 Y 坐标 | 0（默认） | y=”30″ |
| width | 宽度（必填） | 100、50%、100 | width=”200″ |
| height | 高度（必填） | 80、30%、50 | height=”100″ |
| rx | 水平圆角半径 | 0~一半宽度 | rx=”20″ → 胶囊形 |
| ry | 垂直圆角半径 | 通常和 rx 一样 | ry=”20″ |
| fill | 填充色 | red、#0066ff、none | fill=”#4a6fe3″ |
| stroke | 边框色 | black、currentColor | stroke=”currentColor” |
| stroke-width | 边框粗细 | 2、4、0（无边框） | stroke-width=”4″ |
| opacity | 整体透明度 | 0~1 | opacity=”0.7″ |
| fill-opacity | 仅填充透明度 | 0~1 | fill-opacity=”0.3″ |
| stroke-opacity | 仅边框透明度 | 0~1 | stroke-opacity=”0.8″ |
3. 2025 年最常用的 8 种写法（直接复制）
<!-- 1. 基础矩形 -->
<rect x="50" y="50" width="200" height="100" fill="#4a6fe3"/>
<!-- 2. 圆角矩形（最常用） -->
<rect x="20" y="20" width="160" height="80" rx="16" fill="#0066ff"/>
<!-- 3. 完美胶囊形（rx = height/2） -->
<rect x="50" y="80" width="200" height="48" rx="24" fill="#ff5a5f"/>
<!-- 4. 可改色图标（用 currentColor） -->
<rect width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"/>
<!-- 5. 透明背景 + 边框（按钮常用） -->
<rect width="140" height="44" rx="8" fill="none" stroke="#0066ff" stroke-width="2"/>
<!-- 6. 渐变填充（配合 <defs>） -->
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="#ff8a00"/>
<stop offset="100%" stop-color="#da1b60"/>
</linearGradient>
</defs>
<rect width="300" height="120" fill="url(#grad1)"/>
<!-- 7. 响应式 100% 宽高 -->
<rect width="100%" height="100%" fill="#f0f0f0" rx="12"/>
<!-- 8. 动画矩形（加载条） -->
<rect width="200" height="20" fill="#e0e0e0" rx="10"/>
<rect width="60" height="20" fill="#0066ff" rx="10">
<animate attributeName="width" from="0" to="200" dur="2s" repeatCount="indefinite"/>
</rect>4. 实用技巧合集（2025 必备）
| 技巧 | 代码 | 效果 |
|---|---|---|
| 让矩形垂直/水平居中 | <rect x="50%" y="50%" width="100" height="60" transform="translate(-50,-30)"/> | 完美居中 |
| 1px 极细边框（高清屏不模糊） | stroke-width="0.5" vector-effect="non-scaling-stroke" | 永远 1px 粗 |
| 虚线边框 | stroke-dasharray="8 4" | 8px 实线 + 4px 空隙 |
| 鼠标悬停变色 | <rect fill="#0066ff" class="hover-fill"/> + CSS :hover .hover-fill { fill: #ff5a5f } | 交互按钮 |
| 圆形（用 rect 实现） | <rect x="50" y="50" width="100" height="100" rx="50"/> | 正圆 |
5. 一句话总结
2025 年前端写按钮、卡片、标签、进度条、图标背景……第一个想到的就是 <rect> + rx + currentColor！
需要我立刻发你一个「100 个最常用 <rect> 图标源码包」（全部可改色、带圆角、带动画）吗？解压即用，复制粘贴就能出效果！
