4. SVG基本图形绘制教程

1. 矩形 <rect>

矩形是SVG中最基本的图形之一。通过<rect>元素可以绘制矩形和正方形。

参数:

• x 和 y：定义矩形左上角的坐标。
• width 和 height：定义矩形的宽度和高度。
• rx 和 ry：定义矩形边角的圆滑程度。

代码示例:

<svg width="100" height="100">
  <!-- 简单的矩形 -->
  <rect x="10" y="10" width="30" height="30" />

  <!-- 圆角矩形 -->
  <rect x="50" y="10" width="30" height="30" rx="5" ry="5" />
</svg>

说明:

• 第一个<rect>元素绘制了一个简单的矩形。
• 第二个<rect>元素绘制了一个圆角矩形，rx 和 ry 参数使得角变得圆滑。

2. 圆形 <circle>

圆形通过<circle>元素来绘制。

参数:

• cx 和 cy：定义圆心的坐标。
• r：定义圆的半径。

代码示例:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" />
</svg>

说明:

• cx 和 cy 参数定义了圆心在SVG画布上的位置，r 参数定义了圆的大小。

3. 椭圆 <ellipse>

椭圆通过<ellipse>元素来绘制。

参数:

• cx 和 cy：定义椭圆中心的坐标。
• rx 和 ry：定义椭圆的主半径和次半径。

代码示例:

<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="30" ry="20" />
</svg>

说明:

• rx 和 ry 参数定义了椭圆的形状，其中rx是水平半径，ry是垂直半径。

4. 线 <line>

直线通过<line>元素来绘制。

参数:

• x1 和 y1：定义线的起点坐标。
• x2 和 y2：定义线的终点坐标。

代码示例:

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>

说明:

• stroke 属性定义了线的颜色。

5. 多边形 <polygon>

多边形通过<polygon>元素来绘制。

参数:

• points：定义多边形每个顶点的坐标。

代码示例:

<svg width="100" height="100">
  <polygon points="50,10 90,90 10,90" />
</svg>

说明:

• points 参数是一系列坐标，用空格分隔，定义了多边形的形状。

6. 折线 <polyline>

折线通过<polyline>元素来绘制。

参数:

• points：定义折线每个拐点的坐标。

代码示例:

<svg width="100" height="100">
  <polyline points="10,10 50,50 90,10" stroke="black" fill="none" />
</svg>

说明:

• fill="none" 确保折线中间不被填充颜色。