本文概述
要绘制SVG, 有各种基本形状。这些形状的目的可通过其名称轻松理解。
定义元素时, 它对应于不同的形状, 并且有不同的属性来描述这些形状的大小和位置。
SVG提供了多种形状来绘制图像。这些如下：
长方形
rect元素用于在屏幕上绘制矩形。要控制屏幕上矩形的位置和形状, 有6个基本属性。
x：定义矩形左上角的位置。
y：定义矩形的顶部位置。
width：它定义矩形的宽度。
height：定义矩形的高度。
fill-opacity：用于定义填充颜色的不透明度。范围可以是0到1。
stroke-opacity：定义笔触颜色的不透明度。范围可以是0到1。
例子
<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
<rect x="50" y="50" width="200" height="200" style="fill:green;stroke:orange;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
</body>
</html>圈
circle元素用于在屏幕上绘制一个圆, 这里有3个基本属性适用。
r：定义圆的半径。
cx：定义圆心的x坐标。
cy：定义圆心的y坐标。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="250" width="250">
<circle cx="70" cy="70" r="40" stroke="red" stroke-width="3" fill="pink" />
</svg>
</body>
</html>立即测试
椭圆
椭圆是圆形元素的更一般形式。你可以分别缩放圆的x和y半径。
用于绘制椭圆的属性：
rx：定义水平半径。
ry：定义垂直半径。
cx：定义椭圆中心的x坐标。
cy：定义椭圆中心的y坐标。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="500" width="500">
<ellipse cx="250" cy="100" rx="120" ry="70" style="fill:red;stroke:black;stroke-width:3" />
</svg>
</body>
</html>立即测试
线
line属性用于在屏幕上绘制一条直线。它有两个点, 它们指定了直线的起点和终点。
x1：定义x轴上线的起点。
y1：定义y轴上的线的起点。
x2：定义x轴上的线的终点。
y2：定义y轴上的线的终点。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="500" width="450">
<line x1="5" y1="5" x2="150" y2="150" style="stroke:rgb(0, 0, 255);stroke-width:3" />
</svg>
</body>
</html>立即测试
折线
折线是连接的直线组。它在一个属性中具有所有线点。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="450" width="450">
<polyline points="10, 20 40, 30 55, 45 76, 125 125, 135 210, 200" style="fill:none;stroke:black;stroke-width:3" />
</svg>
</body>
</html>立即测试
在此列表中, 每个数字都用空格逗号分隔。每个点必须包含两个定义x坐标和y坐标的数字。因此, 点(0, 0), (1, 1)和(2, 2)的列表可以写为” 0 0, 1 1, 2 2″。
路径
路径是SVG中可以使用的最通用的形状。通过path元素, 你可以绘制椭圆, 矩形, 多边形, 圆形和折线。为了控制其形状, 只有一个属性。
例子
<!DOCTYPE html>
<html>
<body>
<svg height="450" width="450">
<path d="M250 10 L100 200 L400 200 Z" />
</svg>
</body>
</html>立即测试
解释
该代码定义了一条路径, 该路径从位置250, 10开始, 有一条线到位置100, 200, 然后从那里开始, 有一条线到达400, 200, 最后将路径闭合回到250, 10。
