📌  相关文章
📜  如何在 HTML 中使用 SVG 标签画一个圆？(1)

📅  最后修改于: 2023-12-03 15:24:11.091000             🧑  作者: Mango

如何在 HTML 中使用 SVG 标签画一个圆？

SVG（Scalable Vector Graphics）是一种使用 XML 描述二维图形的语言，其本质上就是一组 HTML 标签和属性，可以在网页中绘制出美观的矢量图形，而且可以随意缩放而不失真。

使用 SVG 绘制一个圆非常简单，只需使用 <circle> 标签，并设置相应的属性即可。

接下来我们就来详细介绍绘制一个圆的方法

首先，需要在 HTML 文件中添加 SVG 标签，这可以通过在 <body> 标签内添加一个 <svg> 标签来实现。下面是一个基本的 SVG 元素：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
  • cx 属性指定圆心的 x 坐标，此处设为50
  • cy 属性指定圆心的 y 坐标，此处也为50
  • r 属性指定圆的半径，此处设为40
  • fill 属性指定圆的填充颜色，此处为红色（red）

最终呈现效果如下：

属性解释
  • cx：指定圆心的 x 坐标，单位为像素。
  • cy：指定圆心的 y 坐标，单位为像素。
  • r：指定圆的半径，单位为像素。
  • fill：指定圆的填充颜色，可以是颜色关键字、十六进制、RGB 或 RGBA 值。
修改颜色

可以通过修改 fill 属性的值来改变圆的填充颜色，例如：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

将圆的填充颜色修改为蓝色（blue），结果如下：

修改圆心与半径

可以通过修改 cx、cy 和 r 属性的值来改变圆的圆心和半径，例如：

<svg width="100" height="100">
  <circle cx="30" cy="70" r="20" fill="green" />
</svg>

将圆心坐标设置为 (30, 70)，半径设置为 20，填充颜色修改为绿色（green），结果如下：

填充为无色

如果不想给圆填充颜色，可以将 fill 属性值设置为 "none"，例如：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="black" />
</svg>

将 fill 属性值修改为 "none"，并添加一个黑色边框，结果如下：

总结

本文介绍了如何使用 HTML 中的 SVG 标签来绘制一个圆形。通过使用 circle 标签和设置不同的属性，可以轻松地绘制出多样化的圆形图形。