如何在 HTML 中使用 SVG 标签绘制圆形?

htmlweb developmentfront end technology更新于 2024/7/3 3:24:17

HTML 的 SVG 标签是一个用于描述二维图形的容器。SVG 代表可缩放矢量图形 (Scalable Vector Graphics)，表示任何矢量图形在 X 和 Y 坐标系中的二维图形。这种类型的标签主要用于绘制圆形、矩形、圆角矩形、正方形、三角形、星形等矢量图形。

使用 SVG 标签绘制圆形的方法有很多种，例如在 HTML 中使用 <circle> 标签、<ellipse> 标签以及 <path> 标签。这里我们将学习其中的两个标签，即 <cirlce> 和 <ellipse>标签。

语法

示例中使用以下语法 -

<svg> </svg>

这是 HTML 中的一个图形元素，可用于绘制不同类型的形状，例如圆形、矩形、正方形等。

<ellipse> </ellipse>

<SVG> 的属性标签

圆圈中使用的属性如下:-

r - 'r' 属性定义圆的半径。
cx - 'cx' 属性定义圆心的 x 坐标。该属性的长度以水平方向测量。
cy - 'cy' 属性定义圆心的 y 坐标。该属性的长度以垂直方向测量。
stroke − stroke 属性定义圆的轮廓，并将颜色设置为其值。
stroke-width − 此属性定义宽度的长度。
fill − 此属性将颜色填充到圆中。

示例 1

在此示例中，HTML 代码创建了一个名为"Circle"的简单网页，其名称为。标题元素中显示文本"使用 SVG 绘制的圆圈"，表明该页面的目标是使用 SVG 显示一个圆圈。该圆圈是使用 SVG 元素绘制的。 SVG元素可以给圆圈元素设置某些属性，例如r、cx、cy、stroke、stroke-width等，从而在网页上产生一个完整的圆圈。

<!DOCTYPE html>
<html>
<title>Circle</title>
<head>
</head>
<body>
   <h1>Circle using SVG</h1>
   <svg>
      <circle r="45" cx="80" cy="100" stroke="green" stroke-width="4" fill="#bf6660">
      </circle>
   <svg>
</body>
</html>

示例 2

在下面的示例中，我们将在绘制圆形的 svg 元素中使用名为 ellipse 的元素。为了设计出理想的圆形，我们运用了 SVG 的一些属性。

<!DOCTYPE html>
<html>
<title>Circle</title>
<head>
   <style>
      ellipse{
         stroke: red;
         stroke-width: 8;
      }
   </style>
</head>
<body>
   <h1>Circle using SVG and Ellipse</h1>
   <svg>
      <svg height="240" width="400">
         <ellipse cx="180" cy="80" rx="100" ry="50"/>
      </svg>
   </svg>
</body>
</html>