SVG基本形状

SVG（Scalable Vector Graphics）指可伸缩矢量图形，是一种基于 XML 语言的图像格式，可用于在 Web 页面中展示图像和图形。SVG 提供了一些基本形状，用于绘制图形，这些基本形状包括矩形、圆形、椭圆、直线和折线。在这篇文章中，我们将深入介绍 SVG 基本形状。

矩形

矩形是 SVG 中最常用的形状之一，它可以通过 <rect> 元素来创建。矩形有以下属性：

• x：矩形左上角 x 坐标。
• y：矩形左上角 y 坐标。
• width：矩形宽度。
• height：矩形高度。
• rx：圆角椭圆的 x 轴半径。
• ry：圆角椭圆的 y 轴半径。

下面是一个矩形的例子：

<svg width="200" height="100">
  <rect x="50" y="20" width="100" height="50" rx="10" ry="10" />
</svg>

它会生成一个宽为 200 像素、高为 100 像素的 SVG 元素，其中包含一个宽 100 像素、高 50 像素、位置为 (50,20) 的矩形，其圆角椭圆的 x 轴和 y 轴半径均为 10。

圆形和椭圆

圆形和椭圆分别通过 <circle> 和 <ellipse> 元素来创建。他们有以下属性：

• cx：圆心的 x 坐标。
• cy：圆心的 y 坐标。
• r：圆的半径（仅适用于 <circle>）。
• rx：椭圆的 x 轴半径（仅适用于 <ellipse>）。
• ry：椭圆的 y 轴半径（仅适用于 <ellipse>）。

下面是圆形和椭圆的例子：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" />
  <ellipse cx="150" cy="150" rx="50" ry="30" />
</svg>

它会生成一个宽为 200 像素、高为 200 像素的 SVG 元素，其中包含一个圆心为 (100,100)，半径为 50 的圆和一个圆心为 (150,150)，x 轴半径为 50，y 轴半径为 30 的椭圆。

直线和折线

直线和折线分别通过 <line> 和 <polyline> 元素来创建。它们有以下属性：

• x1：线段起点的 x 坐标。
• y1：线段起点的 y 坐标。
• x2：线段终点的 x 坐标。
• y2：线段终点的 y 坐标。
• points：折线的一系列点，每个点用一个坐标对表示。

下面是直线和折线的例子：

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="200" />
  <polyline points="50,50 100,25 150,50 100,75 50,50" />
</svg>

它会生成一个宽为 200 像素、高为 200 像素的 SVG 元素，其中包含一条起点为 (0,0)，终点为 (200,200) 的直线和一个由五个点组成的折线。

以上就是 SVG 基本形状的介绍。通过这些基本形状，我们可以绘制出各种复杂的图形和图表。