SVG 矩形

<rect> 元素用于绘制矩形和正方形，是 SVG 中最基础的形状之一。

基本语法

<svg width="200" height="100">
  <rect width="200" height="100" fill="#3b82f6"/>
</svg>

主要属性

属性	描述
x	矩形左上角 x 坐标（默认 0）
y	矩形左上角 y 坐标（默认 0）
width	矩形宽度
height	矩形高度
rx	圆角 x 轴半径
ry	圆角 y 轴半径
fill	填充颜色
stroke	描边颜色
stroke-width	描边宽度

基础矩形

<svg width="300" height="200">
  <!-- 蓝色矩形 -->
  <rect x="10" y="10" width="120" height="80" fill="#3b82f6"/>
  
  <!-- 绿色矩形 -->
  <rect x="150" y="10" width="120" height="80" fill="#22c55e"/>
  
  <!-- 红色矩形 -->
  <rect x="10" y="100" width="120" height="80" fill="#ef4444"/>
  
  <!-- 紫色矩形 -->
  <rect x="150" y="100" width="120" height="80" fill="#8b5cf6"/>
</svg>

带描边的矩形

<svg width="300" height="150">
  <!-- 只有描边 -->
  <rect x="10" y="10" width="100" height="80" 
        fill="none" stroke="#3b82f6" stroke-width="2"/>
  
  <!-- 填充 + 描边 -->
  <rect x="130" y="10" width="100" height="80" 
        fill="#bfdbfe" stroke="#3b82f6" stroke-width="3"/>
  
  <!-- 虚线描边 -->
  <rect x="250" y="10" width="100" height="80" 
        fill="none" stroke="#3b82f6" stroke-width="2"
        stroke-dasharray="5,3"/>
</svg>

圆角矩形

使用 rx 和 ry 属性创建圆角：

<svg width="400" height="200">
  <!-- 小圆角 -->
  <rect x="10" y="10" width="100" height="80" rx="5" fill="#3b82f6"/>
  
  <!-- 中等圆角 -->
  <rect x="130" y="10" width="100" height="80" rx="15" fill="#22c55e"/>
  
  <!-- 大圆角 -->
  <rect x="250" y="10" width="100" height="80" rx="30" fill="#ef4444"/>
  
  <!-- 完全圆角（胶囊形） -->
  <rect x="10" y="110" width="150" height="60" rx="30" fill="#8b5cf6"/>
  
  <!-- 不同的 rx 和 ry -->
  <rect x="180" y="110" width="100" height="60" rx="20" ry="10" fill="#f59e0b"/>
</svg>

提示

如果只设置 rx，ry 会自动采用相同值。

正方形

正方形就是宽高相等的矩形：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="#3b82f6"/>
</svg>

透明度

<svg width="300" height="150">
  <!-- 半透明矩形 -->
  <rect x="10" y="10" width="100" height="100" fill="#3b82f6" opacity="0.5"/>
  
  <!-- 另一个半透明矩形（重叠） -->
  <rect x="60" y="30" width="100" height="100" fill="#ef4444" opacity="0.5"/>
  
  <!-- 使用 fill-opacity -->
  <rect x="180" y="10" width="100" height="100" 
        fill="#22c55e" fill-opacity="0.7"
        stroke="#22c55e" stroke-width="3" stroke-opacity="1"/>
</svg>

使用 CSS 样式

可以用 CSS 来设置矩形样式：

<style>
  .my-rect {
    fill: #3b82f6;
    stroke: #1d4ed8;
    stroke-width: 2px;
    transition: all 0.3s ease;
  }
  .my-rect:hover {
    fill: #60a5fa;
    transform: scale(1.05);
  }
</style>

<svg width="200" height="100">
  <rect class="my-rect" x="10" y="10" width="80" height="80"/>
</svg>

动画矩形

使用 SVG 内置动画：

<svg width="300" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#3b82f6">
    <!-- 颜色动画 -->
    <animate attributeName="fill" 
             values="#3b82f6;#ef4444;#22c55e;#3b82f6" 
             dur="3s" 
             repeatCount="indefinite"/>
  </rect>
  
  <rect x="110" y="10" width="80" height="80" fill="#8b5cf6">
    <!-- 宽度动画 -->
    <animate attributeName="width" 
             values="80;120;80" 
             dur="1.5s" 
             repeatCount="indefinite"/>
  </rect>
  
  <rect x="210" y="10" width="80" height="80" fill="#22c55e">
    <!-- 圆角动画 -->
    <animate attributeName="rx" 
             values="0;40;0" 
             dur="2s" 
             repeatCount="indefinite"/>
  </rect>
</svg>

实际应用示例

进度条

<svg width="300" height="30">
  <!-- 背景 -->
  <rect x="0" y="0" width="300" height="30" rx="15" fill="#e5e7eb"/>
  <!-- 进度 -->
  <rect x="0" y="0" width="210" height="30" rx="15" fill="#3b82f6"/>
  <!-- 文字 -->
  <text x="150" y="20" text-anchor="middle" fill="white" font-size="14">70%</text>
</svg>

按钮

<svg width="150" height="50">
  <rect x="0" y="0" width="150" height="50" rx="8" fill="#3b82f6"/>
  <text x="75" y="32" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    点击我
  </text>
</svg>

卡片

<svg width="200" height="250">
  <!-- 卡片背景 -->
  <rect x="0" y="0" width="200" height="250" rx="12" fill="white" 
        stroke="#e5e7eb" stroke-width="1"/>
  <!-- 顶部图片区域 -->
  <rect x="0" y="0" width="200" height="120" rx="12" fill="#3b82f6"/>
  <!-- 修复底部圆角 -->
  <rect x="0" y="100" width="200" height="30" fill="#3b82f6"/>
</svg>

下一步

学会了矩形，接下来让我们学习 SVG 圆 的绘制！