矢量图形-基本形状-绘制SVG矩形-前端-HTML5-书闪BookChips

120 - 矢量图形 - 基本形状 - 绘制 SVG 矩形

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:00:17

矢量图形 - 基本形状 - 绘制 SVG 矩形

在前端开发中，SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 语法的图像格式，它可以在不损失图像质量的前提下进行任意缩放，特别适合用于创建各种高质量的图形和图标。本文将重点介绍如何使用 SVG 来绘制矩形。

什么是 SVG 矩形

SVG 矩形是 SVG 中最基本的图形之一，通过指定矩形的位置、大小、填充颜色、边框样式等属性，可以创建出各种不同外观的矩形。使用 SVG 绘制矩形的优势在于，无论在何种分辨率的设备上显示，矩形都能保持清晰锐利。

基本的 SVG 矩形绘制

要绘制一个 SVG 矩形，需要使用 <rect> 元素。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制 SVG 矩形</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="50" y="50" width="100" height="100" fill="blue" />
    </svg>
</body>
</html>

代码解释

<svg> 元素：这是 SVG 图形的容器，width 和 height 属性分别指定了 SVG 图形的宽度和高度。
<rect> 元素：用于绘制矩形。
- x 属性：指定矩形左上角的 x 坐标，这里设置为 50，表示矩形从距离 SVG 容器左侧 50 个单位的位置开始绘制。
- y 属性：指定矩形左上角的 y 坐标，这里设置为 50，表示矩形从距离 SVG 容器顶部 50 个单位的位置开始绘制。
- width 属性：指定矩形的宽度，这里设置为 100，表示矩形的宽度为 100 个单位。
- height 属性：指定矩形的高度，这里设置为 100，表示矩形的高度为 100 个单位。
- fill 属性：指定矩形的填充颜色，这里设置为 blue，表示矩形内部填充为蓝色。

带有边框的 SVG 矩形

除了填充颜色，还可以为矩形添加边框。通过 stroke 和 stroke-width 属性可以实现这一点。以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带边框的 SVG 矩形</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="50" y="50" width="100" height="100" fill="yellow" stroke="red" stroke-width="5" />
    </svg>
</body>
</html>

代码解释

stroke 属性：指定矩形边框的颜色，这里设置为 red，表示边框为红色。
stroke-width 属性：指定矩形边框的宽度，这里设置为 5，表示边框的宽度为 5 个单位。

圆角 SVG 矩形

<rect> 元素还支持 rx 和 ry 属性，用于创建圆角矩形。以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角 SVG 矩形</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="50" y="50" width="100" height="100" fill="green" rx="20" ry="20" />
    </svg>
</body>
</html>

代码解释

rx 属性：指定矩形圆角在 x 方向的半径。
ry 属性：指定矩形圆角在 y 方向的半径。这里将 rx 和 ry 都设置为 20，创建了一个圆角半径为 20 个单位的圆角矩形。

总结

属性	描述
`x`	矩形左上角的 x 坐标
`y`	矩形左上角的 y 坐标
`width`	矩形的宽度
`height`	矩形的高度
`fill`	矩形的填充颜色
`stroke`	矩形边框的颜色
`stroke-width`	矩形边框的宽度
`rx`	矩形圆角在 x 方向的半径
`ry`	矩形圆角在 y 方向的半径

通过使用 <rect> 元素和这些属性，我们可以轻松地绘制出各种不同样式的矩形，为前端页面增添丰富的视觉效果。无论是简单的图标还是复杂的图形界面，SVG 矩形都能发挥重要的作用。