SVG 入门基础（2）形状元素
2023-11-18 00:01:44
SVG 的形状元素提供了多种形状，如矩形、圆形、椭圆、线条、折线、多边形、路径和文本，这些元素可以用来创建复杂的图形。本文将介绍 SVG 形状元素的基本用法。
图形元素
- 矩形
矩形使用 < rect > < /rect > 标签来进行绘制。
参数说明：
- x：左上角 x 的坐标，距离左边的距离。
- y：左上角 y 的坐标，距离顶部的距离。
- width：矩形的宽度。
- height：矩形的高度。
例如：
<rect x="10" y="10" width="100" height="100" style="fill:red; stroke:black; stroke-width:2" />
这个代码将绘制一个红色填充、黑色边框、边框宽度为 2 像素的矩形，矩形左上角坐标为 (10, 10)，宽度为 100 像素，高度为 100 像素。
- 圆形
圆形使用 < circle > < /circle > 标签来进行绘制。
参数说明：
- cx：圆心的 x 坐标。
- cy：圆心的 y 坐标。
- r：圆的半径。
例如：
<circle cx="50" cy="50" r="50" style="fill:blue; stroke:black; stroke-width:2" />
这个代码将绘制一个蓝色填充、黑色边框、边框宽度为 2 像素的圆形，圆心坐标为 (50, 50)，半径为 50 像素。
- 椭圆
椭圆使用 < ellipse > < /ellipse > 标签来进行绘制。
参数说明：
- cx：椭圆中心的 x 坐标。
- cy：椭圆中心的 y 坐标。
- rx：椭圆沿 x 轴方向的半径。
- ry：椭圆沿 y 轴方向的半径。
例如：
<ellipse cx="100" cy="50" rx="50" ry="25" style="fill:green; stroke:black; stroke-width:2" />
这个代码将绘制一个绿色填充、黑色边框、边框宽度为 2 像素的椭圆，椭圆中心坐标为 (100, 50)，沿 x 轴方向的半径为 50 像素，沿 y 轴方向的半径为 25 像素。
- 线条
线条使用 < line > < /line > 标签来进行绘制。
参数说明：
- x1：线条的起点在 x 轴上的坐标。
- y1：线条的起点在 y 轴上的坐标。
- x2：线条的终点在 x 轴上的坐标。
- y2：线条的终点在 y 轴上的坐标。
例如：
<line x1="0" y1="0" x2="100" y2="100" style="stroke:black; stroke-width:2" />
这个代码将绘制一条黑色边框、边框宽度为 2 像素的直线，直线的起点为 (0, 0)，终点为 (100, 100)。
- 折线
折线使用 < polyline > < /polyline > 标签来进行绘制。
参数说明：
- points：折线的各个点的坐标，用逗号分隔。
例如：
<polyline points="0,0 100,0 100,100 0,100" style="fill:none; stroke:black; stroke-width:2" />
这个代码将绘制一条黑色边框、边框宽度为 2 像素、无填充的折线，折线由四条线段组成，线段的坐标分别为 (0, 0)、(100, 0)、(100, 100) 和 (0, 100)。
- 多边形
多边形使用 < polygon > < /polygon > 标签来进行绘制。
参数说明：
- points：多边形的各个点的坐标，用逗号分隔。
例如：
<polygon points="0,0 100,0 100,100 50,150 0,100" style="fill:red; stroke:black; stroke-width:2" />
这个代码将绘制一个红色填充、黑色边框、边框宽度为 2 像素的多边形，多边形由五条线段组成，线段的坐标分别为 (0, 0)、(100, 0)、(100, 100)、(50, 150) 和 (0, 100)。
- 路径
路径使用 < path > < /path > 标签来进行绘制。
参数说明：
- d：路径的绘制命令。
例如：
<path d="M 0,0 L 100,0 L 100,100 L 0,100 Z" style="fill:blue; stroke:black; stroke-width:2" />
这个代码将绘制一个蓝色填充、黑色边框、边框宽度为 2 像素的矩形，矩形的左上角坐标为 (0, 0)，宽度为 100 像素，高度为 100 像素。
- 文本
文本使用 < text > < /text > 标签来进行绘制。
参数说明：
- x：文本的 x 坐标。
- y：文本的 y 坐标。
- dy：文本的基线与文本框上边的距离。
- text-anchor：文本的对齐方式。
例如：
<text x="50" y="50" dy="5" text-anchor="middle">Hello, World!</text>
这个代码将绘制一段文本，文本内容为 "Hello, World!"，文本的 x 坐标为 50，y 坐标为 50，文本的基线与文本框上边的距离为 5 像素，文本的
