使用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文件，并在浏览器中打开它，就可以看到绘制出的矩形了。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！