SVG rect

SVG rect

SVG（Scalable Vector Graphics）是用于在Web上呈现图形的标记语言，其形状可以通过SVG元素来定义。其中，rect是一种用于绘制矩形形状的SVG元素。

语法

使用rect元素绘制矩形，需要指定矩形的位置、大小和样式等属性。rect元素的语法如下：

<rect x="x坐标" y="y坐标" width="宽度" height="高度" fill="填充颜色" stroke="描边颜色" stroke-width="描边宽度"/>

其中，各个属性的含义如下：

  • x：矩形左上角的x轴坐标；
  • y：矩形左上角的y轴坐标；
  • width：矩形的宽度；
  • height：矩形的高度；
  • fill：矩形的填充颜色；
  • stroke：矩形的描边颜色；
  • stroke-width：矩形的描边宽度。

示例

下面是一个简单的例子，展示如何使用rect元素绘制一个蓝色的矩形：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue"/>
</svg>

在这个例子中，创建了一个SVG元素，其宽度和高度分别为100个单位。然后，使用rect元素在该SVG元素内部绘制了一个高为80，宽为80的矩形，起点为（10，10），填充颜色为蓝色。

属性

除了上述语法中提到的属性外，rect元素还支持其他一些属性，这些属性主要用于调整矩形的边框、圆角和角度等属性。下面是一些常用的属性：

  • rx：矩形四个角的水平半径；
  • ry：矩形四个角的垂直半径；
  • opacity：矩形的透明度；
  • transform：矩形的变换方式。

其中，rx和ry属性用于设置矩形四个角的圆角半径。默认情况下，矩形的四个角都是直角。如果需要将其变为圆角，则可以设置rx和ry不同的值。

<rect x="50" y="50" width="100" height="100" rx="20" ry="20"/>

在这个例子中，创建一个高为100，宽为100的矩形，四个角的圆角半径分别为20个单位。

变换

除了调整矩形的属性外，还可以使用SVG的变换方式对矩形进行旋转、缩放等操作。下面是一些常用的变换方式：

  • translate(dx, dy)：平移矩形；
  • scale(sx, sy)：缩放矩形；
  • rotate(angle, cx, cy)：旋转矩形。
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="gray"/>
  
  <rect x="50" y="50" width="100" height="100" fill="red" transform="translate(20,20)"/>
  
  <rect x="50" y="50" width="100" height="100" fill="blue" transform="scale(3)"/>
  
  <rect x="50" y="50" width="100" height="100" fill="green" transform="rotate(45, 100, 100)"/>
</svg>

在这个例子中，创建了一个高为200，宽为200的SVG元素。然后，在其中使用rect元素绘制了一个灰色的矩形，以及三个不同颜色的矩形，分别进行了平移、缩放和旋转等变换操作。

总结

SVG rect元素是用于绘制矩形形状的一种元素，其使用语法简单明了，支持各种样式、属性和变换。通过灵活使用SVG rect元素，可以实现各种各样的矩形形状，并将其呈现在Web上。

SVG polygon SVG Stroke 属性