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上。