基本形状

要绘制SVG，有各种基本形状。这些形状的目的很容易通过它们的名称来理解。

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

SVG提供了多种形状来绘制图像。这些如下：

长方形

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

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

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

width ：它定义矩形的宽度。

height ：定义矩形的高度。

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

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

例

圈

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

r ：它定义圆的半径。

cx ：定义圆心的x坐标。

cy ：定义圆心的y坐标。

例

椭圆

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

用于绘制椭圆的属性：

rx ：定义水平半径。

ry ：定义垂直半径。

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

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

例

线

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

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

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

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

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

例

折线

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

例

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

路径

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

例

说明

该代码定义了一条路径，该路径从位置250,10开始，有一条线到位置100,200，然后从那里开始，有一条线到400,200，最后关闭该路径回到250,10。