使用svg画出一个矩形

在前端开发中，你可以使用SVG（Scalable Vector Graphics）来绘制一个矩形。以下是一个简单的示例，展示了如何使用SVG绘制一个矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Rectangle Example</title>
</head>
<body>
    <!-- 创建一个SVG元素，并设置其宽度和高度 -->
    <svg width="200" height="200">
        <!-- 创建一个矩形元素，设置其位置、宽度、高度和填充颜色 -->
        <rect x="50" y="50" width="100" height="100" fill="blue" />
    </svg>
</body>
</html>

在上面的示例中，我们创建了一个<svg>元素，并设置了其宽度和高度。然后，我们在<svg>元素内部创建了一个<rect>元素，该元素表示一个矩形。我们设置了矩形的位置（x和y属性）、宽度（width属性）、高度（height属性）和填充颜色（fill属性）。在这个例子中，矩形被放置在(50, 50)的位置，宽度和高度都是100，填充颜色是蓝色。

你可以将上述代码保存为一个HTML文件，并在浏览器中打开它，就可以看到绘制出的矩形了。

posted @ 2024-12-16 06:20  王铁柱6  阅读(49)  评论(0)    收藏  举报