<rect> 是SVG中用来绘制矩形的元素，它允许你通过设置位置、宽度、高度、圆角等属性来创建矩形形状。<rect> 元素具有许多可自定义的属性，用于控制矩形的外观和行为。

目录

  1. 基本语法
  2. 属性详解
  3. 示例代码
  4. 参考资料
  5. 出站链接

基本语法

<rect x="位置X" y="位置Y" width="宽度" height="高度" fill="填充颜色" stroke="描边颜色" stroke-width="描边宽度" rx="圆角X半径" ry="圆角Y半径" />
  • x 和 y：定义矩形的左上角位置，分别表示矩形在X轴和Y轴上的坐标。
  • width：矩形的宽度。
  • height：矩形的高度。
  • fill：矩形内部的填充颜色。
  • stroke：矩形边框的颜色。
  • stroke-width：矩形边框的宽度。
  • rx 和 ry：定义矩形的圆角半径，分别对应水平和垂直方向的圆角。如果设置这两个属性，矩形的角会变成圆角。

属性详解

  • x 和 y：
    • 控制矩形的左上角位置，默认为0,0。
  • width 和 height：
    • 控制矩形的大小，width为矩形的宽度，height为矩形的高度。
  • fill：
    • 用于设置矩形内部的颜色，支持颜色名称、十六进制颜色值、RGB、RGBA等格式。例如，fill="blue"或者fill="#ff0000"。
  • stroke：
    • 用于设置矩形边框的颜色，支持与fill相同的颜色格式。例如，stroke="black"。
  • stroke-width：
    • 控制矩形边框的宽度，单位为像素。如果不设置，矩形将没有边框。
  • rx 和 ry：
    • 控制矩形的圆角半径，分别对应X轴和Y轴的半径。通过这两个属性，矩形的角可以变得更加圆滑。例如，rx="20"会使矩形的角变成圆角。

示例代码

  1. 基本矩形
<svg width="200" height="200">
  <rect x="50" y="50" width="150" height="100" fill="blue" stroke="black" stroke-width="3" />
</svg>
  • 这个例子绘制了一个蓝色填充、黑色边框的矩形，位置在(50, 50)，宽度为150，高度为100。
  1. 带圆角的矩形
<svg width="200" height="200">
  <rect x="30" y="30" width="150" height="100" fill="green" stroke="black" stroke-width="3" rx="20" ry="20" />
</svg>
  • 这个例子绘制了一个带有圆角的矩形，圆角的半径为20。
  1. 矩形的渐变填充
<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="30" y="30" width="150" height="100" fill="url(#grad1)" stroke="black" stroke-width="3" />
</svg>
  • 这个例子展示了一个矩形填充渐变色，从黄色到红色。
  1. 矩形与动画结合
<svg width="200" height="200">
  <rect id="animateRect" x="50" y="50" width="100" height="100" fill="blue" />
  <animate
    xlink:href="#animateRect"
    attributeName="x"
    from="50"
    to="150"
    dur="2s"
    repeatCount="indefinite"
  />
</svg>
  • 这个例子展示了一个矩形的位置动画，使矩形在水平方向上来回移动。

参考资料

出站链接

<rect>元素是SVG图形中最基本的元素之一，可以非常方便地绘制矩形，并且支持丰富的自定义选项，使得它能够适应各种设计需求。通过组合其他SVG元素（如<circle>、<line>等）和CSS、JavaScript，开发者可以创建动态和交互性强的图形。