SVG 矩形元素

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML语言，其中的矩形元素可以用于创建矩形形状。

矩形元素的基本属性

矩形元素用<rect>标签表示，可以设置以下基本属性：

• x：矩形左上角的x坐标。
• y：矩形左上角的y坐标。
• width：矩形的宽度。
• height：矩形的高度。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="50"/>
</svg>

效果如下：

矩形元素的样式属性

矩形元素可以像其他SVG图形元素一样，通过样式属性来设置外观。以下是一些常用的样式属性：

• fill：矩形的填充颜色，默认为黑色。
• stroke：矩形的边框颜色，默认为无色。
• stroke-width：矩形边框的宽度，默认为1。
• fill-opacity：矩形填充颜色的透明度，默认为1。
• stroke-opacity：矩形边框颜色的透明度，默认为1。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="50"
        fill="red" stroke="blue" stroke-width="3"
        fill-opacity="0.5" stroke-opacity="0.8"/>
</svg>

效果如下：

矩形元素的圆角属性

矩形元素还可以设置圆角属性rx和ry，分别表示水平方向和垂直方向的圆角半径。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="50"
        rx="10" ry="20"
        fill="green" stroke="yellow" stroke-width="5"/>
</svg>

效果如下：

总结

以上就是SVG矩形元素的基本属性和样式属性的介绍，通过设置这些属性可以创建不同形态的矩形。需要注意的是，在SVG中矩形元素是不可以闭合的，它只能是一块矩形区域。