用SVG 绘制六种基本形状：打造炫酷可伸缩图形

SVG（可伸缩矢量图形）是一种基于 XML 的图像格式，以其可伸缩性和清晰度著称。与其他格式不同，SVG 图形可以无限缩放而不会失真，因此非常适合创建需要在不同设备上显示的图形。此外，SVG 也是一种非常灵活的格式，可以轻松地进行编辑和动画处理。

在本文中，我们将向您展示如何使用 SVG 绘制六种基本形状：矩形、圆形、椭圆形、三角形、多边形和路径。这些形状是创建更复杂图形的基础，掌握了这些形状的绘制技巧，您就能轻松创作出各种各样的 SVG 图形。

一、矩形

矩形是最基本的 SVG 形状之一。要绘制矩形，可以使用 <rect> 元素。该元素的属性包括 x、y、width 和 height，分别代表矩形的左上角坐标和矩形的宽度和高度。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" />
</svg>

二、圆形

圆形也是一种非常常见的 SVG 形状。要绘制圆形，可以使用 <circle> 元素。该元素的属性包括 cx、cy、r，分别代表圆形的中心点坐标和圆形的半径。

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

三、椭圆形

椭圆形与圆形非常相似，但它的形状是椭圆的。要绘制椭圆形，可以使用 <ellipse> 元素。该元素的属性包括 cx、cy、rx 和 ry，分别代表椭圆形的中心点坐标和椭圆形的水平半径和垂直半径。

<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" />
</svg>

四、三角形

三角形是一种非常简单的 SVG 形状。要绘制三角形，可以使用 <polygon> 元素。该元素的属性包括 points，用于指定三角形的三个顶点坐标。

<svg width="100" height="100">
  <polygon points="10,10 90,10 50,90" />
</svg>

五、多边形

多边形是一种由多条线段组成的闭合图形。要绘制多边形，可以使用 <polygon> 元素。该元素的属性包括 points，用于指定多边形的各个顶点坐标。

<svg width="100" height="100">
  <polygon points="10,10 90,10 90,90 10,90" />
</svg>

六、路径

路径是一种非常灵活的 SVG 形状。要绘制路径，可以使用 <path> 元素。该元素的属性包括 d，用于指定路径的形状。路径的形状可以通过使用各种命令来定义，例如 M、L、C 和 Z 等。

<svg width="100" height="100">
  <path d="M 10,10 L 90,10 L 90,90 L 10,90 Z" />
</svg>

以上就是使用 SVG 绘制六种基本形状的方法。希望本指南能够帮助您掌握 SVG 的基础知识，并创作出更多精彩的 SVG 图形。