有使用过svg吗？请用svg画一个圆

当然，SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在前端开发中，我们经常使用SVG来创建各种图形，包括圆形。

以下是一个简单的示例，展示如何使用SVG绘制一个圆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Circle Example</title>
</head>
<body>
    <svg width="200" height="200">
        <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
    </svg>
</body>
</html>

在这个示例中，我们创建了一个svg元素，并设置了其宽度和高度。然后，我们在svg元素内部添加了一个circle元素来绘制圆形。circle元素的属性解释如下：

  • cx 和 cy：分别表示圆心的x坐标和y坐标。在这个例子中，我们将圆心设置在（100, 100）的位置。
  • r：表示圆的半径。这里我们设置半径为50。
  • stroke：表示圆的边框颜色。这里我们设置为黑色。
  • stroke-width：表示圆的边框宽度。这里我们设置为2。
  • fill：表示圆的填充颜色。这里我们设置为红色。

你可以将上述代码保存为一个HTML文件，然后在浏览器中打开它，就会看到一个红色的圆形，圆心位于（100, 100）的位置，半径为50，边框颜色为黑色，边框宽度为2。

posted @ 2025-01-16 06:14  王铁柱6  阅读(71)  评论(0)    收藏  举报