突破编程_前端_SVG（基础元素介绍）

1 rect 矩形

在 SVG 中，<rect> 元素用于创建圆形。

（1）基本语法

<rect
  x="x坐标"
  y="y坐标"
  width="宽度"
  height="高度"
  rx="可选：圆角x半径"
  ry="可选：圆角y半径"
  fill="可选：填充颜色"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

1. x, y ：这两个属性定义了矩形左上角的坐标。默认值是 0。
2. width, height ：这两个属性定义了矩形的宽度和高度。
3. rx, ry ：这两个属性可选，用于定义矩形的圆角半径。如果 rx 和 ry 相同，则矩形四个角都是相同的圆角；如果不同，则左上角和右下角的圆角半径为 rx，右上角和左下角的圆角半径为 ry。
4. fill ：定义矩形的填充颜色。如果不设置此属性，矩形将默认透明。
5. stroke ：定义矩形的描边颜色。如果不设置此属性，矩形将没有描边。
6. stroke-width ：定义矩形的描边宽度。默认值是 1。

（2）示例

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个 200x200 的 SVG 画布，并在其中绘制了一个矩形。矩形的左上角坐标是 (10, 10)，宽度是 100，高度是 50。矩形被填充为蓝色，描边为黑色，描边宽度为 2。

2 circle 圆形

在 SVG 中，<circle> 元素用于创建圆形。

（1）基本语法

<circle
  cx="圆心x坐标"
  cy="圆心y坐标"
  r="半径"
  fill="可选：填充颜色"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

1. cx, cy ：这两个属性定义了圆心的x和y坐标。它们是<circle>元素的核心属性，决定了圆的位置。如果省略这些属性，圆心将默认为(0, 0)。
2. r ：这个属性定义了圆的半径。半径决定了圆的大小。
3. fill ：这个属性用于设置圆的填充颜色。如果不设置，圆将默认为透明。
4. stroke ：这个属性用于设置圆的描边颜色。如果不设置，圆将没有描边。
5. stroke-width ：这个属性用于设置圆的描边宽度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为1。

（2）示例

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="3" />
</svg>

在这个示例中，我们创建了一个 200x200 的SVG画布，并在其中绘制了一个圆形。圆心的坐标是 (100, 100)，半径是 50。圆形被填充为红色，描边为黑色，描边宽度为 3。

3 ellipse 椭圆形

在SVG中，<ellipse> 元素用于绘制椭圆，椭圆是高度和宽度不相等的圆，换句话说，它在 x 和 y 方向上的半径是不同的。

（1）基本语法

<ellipse
  cx="圆心x坐标"
  cy="圆心y坐标"
  rx="横向半径"
  ry="纵向半径"
  fill="可选：填充颜色"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

1. cx, cy ：这两个属性定义了椭圆的圆心的 x 和 y 坐标。它们决定了椭圆在 SVG 画布上的位置。

2. rx, ry ：这两个属性分别定义了椭圆的横向半径和纵向半径。rx 是椭圆在x轴方向上的半径，ry 是椭圆在 y 轴方向上的半径。它们共同决定了椭圆的大小和形状。如果 rx 和 ry 的值相同，则绘制的图形是一个圆。

3. fill ：这个属性用于设置椭圆的填充颜色。如果不设置，椭圆将默认为透明。

4. stroke ：这个属性用于设置椭圆的描边颜色。如果不设置，椭圆将没有描边。

5. stroke-width ：这个属性用于设置椭圆的描边宽度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为1。

（2）示例

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个 200x200 的SVG画布，并在其中绘制了一个椭圆。椭圆的圆心坐标是 (100, 100)，横向半径是 50，纵向半径是 30。椭圆被填充为蓝色，描边为黑色，描边宽度为 2。

4 line 线条

在SVG中，<line> 元素用于创建线段。线段是最基本的图形元素之一，由两个端点确定其位置和长度。

（1）基本语法

<line
  x1="起点x坐标"
  y1="起点y坐标"
  x2="终点x坐标"
  y2="终点y坐标"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

1. x1, y1 ：这两个属性定义了线段的起始点的 x 和 y 坐标。它们是创建线段所必需的基本属性。

2. x2, y2 ：这两个属性定义了线段的终点的 x 和 y 坐标。与 x1 和 y1 一起，它们共同确定了线段的长度和方向。

3. stroke ：这个属性用于设置线段的描边颜色。如果不设置，线段将没有可见的描边。

4. stroke-width ：这个属性用于设置线段的描边宽度。描边宽度决定了线段边缘的粗细程度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为 1。

（2）示例

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个200x200的SVG画布，并在其中绘制了一条线段。线段的起始点坐标是(50, 50)，终点坐标是(150, 150)。线段被描边为黑色，描边宽度为2。

5 polygon 多边形

在SVG中，<polygon> 元素用于创建多边形，多边形是由一系列直线段首尾相接形成的闭合图形。

（1）基本语法

<polygon
  points="x1,y1 x2,y2 x3,y3 ... xn,yn"
  fill="可选：填充颜色"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

1. points ：这个属性定义了多边形每个顶点的坐标。每个顶点的坐标由 x 和 y 值组成，并且多个顶点坐标之间用空格分隔。例如，points=“0,0 100,0 100,100 0,100” 定义了一个矩形。

2. fill ：这个属性用于设置多边形的填充颜色。如果不设置，多边形将默认为透明。

3. stroke ：这个属性用于设置多边形的描边颜色。如果不设置，多边形将没有描边。

4. stroke-width ：这个属性用于设置多边形的描边宽度。描边宽度决定了多边形边缘的粗细程度。如果设置了描边颜色但没有设置描边宽度，那么描边的默认宽度通常为 1。

（2）示例

<svg width="200" height="200">
  <polygon points="50,50 150,50 150,150 50,150" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个200x200的 SVG 画布，并在其中绘制了一个四边形（矩形）。多边形的顶点坐标分别是(50,50)、(150,50)、(150,150)和(50,150)，形成了一个闭合的四边形。多边形被填充为蓝色，描边为黑色，描边宽度为 2。

6 path 路径

SVG的 <path> 元素是 SVG 中最强大且最灵活的形状元素之一。它允许你使用一系列的命令来绘制复杂的路径，包括直线、曲线以及它们的组合。

（1）基本语法

<path
  d="绘制命令+参数"
  fill="可选：填充颜色"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

d 属性是 <path> 元素的核心，它包含了绘制路径所需的命令和参数。这些命令可以是移动到一个点（M/m）、绘制直线（L/l）、绘制水平线或垂直线（H/h 和 V/v）、绘制曲线（A/a、Q/q、T/t、C/c、S/s）等。每个命令后面跟着相应的参数，这些参数定义了路径的形状。

示例命令：

• M/m ：移动到指定坐标。大写 M 表示绝对位置，小写 m 表示相对位置。
• L/l ：从当前位置绘制直线到指定坐标。大写 L 表示绝对坐标，小写 l 表示相对坐标。
• H/h ：绘制水平线到指定 x 坐标。
• V/v ：绘制垂直线到指定 y 坐标。
• A/a ：绘制椭圆弧。大写 A 使用绝对坐标，小写 a 使用相对坐标。
• Q/q ：绘制二次贝塞尔曲线。
• T/t ：通过平滑控制点绘制二次贝塞尔曲线。
• C/c ：绘制三次贝塞尔曲线。
• S/s ：通过平滑控制点绘制三次贝塞尔曲线。
• Z/z ：闭合路径，使路径的起点和终点相连。

（2）示例

<svg width="200" height="200">
  <path d="M 50 50 L 150 50 L 150 150 L 50 150 Z" fill="none" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个正方形路径。命令 M 50 50 将起始点移动到 (50, 50)，然后 L 150 50 绘制一条直线到 (150, 50)，接着 L 150 150 到 (150, 150)，最后 L 50 150 到 (50, 150)，Z 命令闭合路径，形成一个完整的正方形。路径没有填充（fill=“none”），描边为黑色（stroke=“black”），描边宽度为 2（stroke-width=“2”）。