基本形状

要绘制 SVG，有各种基本形状。这些形状的用途可以通过它们的名称轻松理解。

定义元素时，它们对应于不同的形状，并且有不同的属性来描述这些形状的大小和位置。

SVG 提供了许多用于绘制图像的形状。 如下所示：

矩形

rect 元素用于在屏幕上绘制一个矩形。 为了控制屏幕上矩形的位置和形状，有 6 个基本属性。

x：它定义矩形左上角的位置。

y：它定义矩形的顶部位置。

width：它定义矩形的宽度。

height：它定义矩形的高度。

fill-opacity：它用于定义填充颜色的不透明度。 它的范围可以是 0 到 1。

stroke-opacity：它定义描边颜色的不透明度。 它的范围可以是 0 到 1。

示例

圆

circle 元素用于在屏幕上绘制一个圆，这里有 3 个基本属性适用。

r：它定义圆的半径。

cx：它定义圆心的 x 坐标。

cy：它定义圆心的 y 坐标。

示例

椭圆

椭圆是 circle 元素的更一般形式。 可以分别缩放圆的 x 和 y 半径。

用于绘制椭圆的属性

rx：它定义水平半径。

ry：它定义垂直半径。

cx：它定义椭圆中心的 x 坐标。

cy：它定义椭圆中心的 y 坐标。

示例

线

line 属性用于在屏幕上绘制一条直线。 它有两个点，指定该线的起点和终点。

x1：它定义线在 x 轴上的起点。

y1：它定义线在 y 轴上的起点。

x2：它定义线在 x 轴上的终点。

y2：它定义线在 y 轴上的终点。

示例

多段线

Polyline 是一组连接的直线。 它在一个属性中具有所有线的点。

示例

在此列表中，每个数字都用空格和逗号分隔。 每个点必须包含两个数字，用于定义 x 坐标和 y 坐标。 因此，点的列表（0,0）、（1,1）和（2,2）可以写成“0 0, 1 1, 2 2”。

路径

Path 是可以在 SVG 中使用的最通用的形状。 通过 path 元素，您可以绘制椭圆、矩形、多边形、圆形和折线。 为了控制它的形状，有一个单一的属性。

示例

说明

此代码定义了一个路径，该路径从位置 250,10 开始，到位置 100,200 处画一条线，然后从那里到 400,200 处画一条线，最后将路径闭合到 250,10。