SVG图形绘制教程：椭圆、直线、多边形（二）

admin
后端开发
7天前
6热度
0评论

SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，广泛用于网页设计和开发。本文将详细介绍如何使用 SVG 绘制椭圆、直线、多边形、多段线和路径，并提供丰富的实例和代码示例。通过学习本文，您将能够掌握这些基本图形的绘制方法，并在实际项目中灵活运用。

椭圆 <ellipse>

SVG 中的 <ellipse> 元素用于绘制椭圆形。通过设置不同的属性，您可以精确控制椭圆的位置、大小和样式。

基本语法

<ellipse
  cx="x-coordinate"      <!-- 椭圆中心点的 x 坐标 -->
  cy="y-coordinate"      <!-- 椭圆中心点的 y 坐标 -->
  rx="x-radius"          <!-- 椭圆水平轴的半径 -->
  ry="y-radius"          <!-- 椭圆垂直轴的半径 -->
  fill="fill-color"      <!-- 椭圆的填充颜色 -->
  stroke="stroke-color"  <!-- 椭圆的描边颜色 -->
  stroke-width="width"   <!-- 椭圆的描边宽度 -->
/>

属性解析

cx 和 cy：定义椭圆的中心点坐标。
rx：定义椭圆水平轴的半径。
ry：定义椭圆垂直轴的半径。
fill：定义椭圆的填充颜色。
stroke：定义椭圆的描边颜色。
stroke-width：定义椭圆的描边宽度。

示例 1：绘制一个简单的椭圆

以下代码绘制了一个蓝色填充、黑色描边、水平轴半径为 80 像素、垂直轴半径为 50 像素的椭圆形，椭圆的中心点坐标为 (100, 100)。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

示例 2：绘制多个叠加的椭圆

下面的例子创建了三个累叠而上的椭圆，展示了如何通过调整 cx、cy、rx 和 ry 属性来实现不同的效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>

示例 3：组合两个椭圆

下面的例子展示了如何组合两个椭圆，一个黄色的和一个白色的，形成一个有趣的效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />
</svg>

直线 <line>

SVG 中的 <line> 元素用于绘制直线。通过设置起点和终点的坐标，您可以轻松创建任意方向的直线。

基本语法

<line
  x1="x1-coordinate"     <!-- 起点的 x 坐标 -->
  y1="y1-coordinate"     <!-- 起点的 y 坐标 -->
  x2="x2-coordinate"     <!-- 终点的 x 坐标 -->
  y2="y2-coordinate"     <!-- 终点的 y 坐标 -->
  stroke="stroke-color"  <!-- 直线的颜色 -->
  stroke-width="width"   <!-- 直线的宽度 -->
/>

属性解析

x1 和 y1：定义直线的起点坐标。
x2 和 y2：定义直线的终点坐标。
stroke：定义直线的颜色。
stroke-width：定义直线的宽度。

示例：绘制一条黑色描边的直线

以下代码绘制了一条黑色描边、宽度为 2 像素的直线，起点坐标为 (50, 50)，终点坐标为 (150, 150)。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2" />
</svg>

多边形 <polygon>

SVG 中的 <polygon> 元素用于绘制多边形。通过设置各个顶点的坐标，您可以创建各种形状的多边形。

基本语法

<polygon
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多边形各个顶点的坐标 -->
  fill="fill-color"                <!-- 多边形的填充颜色 -->
  stroke="stroke-color"            <!-- 多边形的边框颜色 -->
  stroke-width="width"             <!-- 多边形的边框宽度 -->
/>

属性解析

points：定义多边形各个顶点的坐标，多个顶点的坐标以空格或逗号分隔。
fill：定义多边形的填充颜色。
stroke：定义多边形的边框颜色。
stroke-width：定义多边形的边框宽度。

示例 1：绘制一个简单的三角形

以下代码绘制了一个橙色填充、黑色描边、宽度为 2 像素的三角形，其顶点坐标分别为 (100, 10)、(150, 190) 和 (50, 190)。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" fill="orange" stroke="black" stroke-width="2" />

</svg>

示例 2：绘制一个四边形

下面的例子创建了一个四边形，展示了如何通过设置更多的顶点来创建复杂形状。

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

示例 3：绘制一个星形

下面的例子展示了如何使用 <polygon> 元素创建一个星形。

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

示例 4：改变填充规则

通过改变 fill-rule 属性，您可以控制多边形内部的填充方式。以下代码展示了如何将 fill-rule 设置为 evenodd。

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

多段线 <polyline>

SVG 中的 <polyline> 元素用于绘制多段线。与 <polygon> 不同，<polyline> 绘制的线条是未封闭的，即起点和终点不会自动连接。

基本语法

<polyline
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多段线各个顶点的坐标 -->
  fill="none"                      <!-- 多段线的填充颜色，使用 "none" 表示不填充 -->
  stroke="stroke-color"            <!-- 多段线的边框颜色 -->
  stroke-width="width"             <!-- 多段线的边框宽度 -->
/>

属性解析

points：定义多段线各个顶点的坐标，多个顶点的坐标以空格或逗号分隔。
fill：定义多段线的填充颜色，通常设置为 "none" 表示不填充。
stroke：定义多段线的边框颜色。
stroke-width：定义多段线的边框宽度。

示例 1：绘制一个简单的多段线

以下代码绘制了一个黑色描边、宽度为 2 像素的多段线，其顶点坐标分别为 (50, 50)、(100, 150)、(150, 100) 和 (200, 200)。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,50 100,150 150,100 200,200" fill="none" stroke="black" stroke-width="2" />
</svg>

示例 2：绘制一个折线

下面的例子展示了如何使用 <polyline> 元素创建一个折线。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

路径 <path>

SVG 中的 <path> 元素是最强大和最灵活的基本形状之一，可以用于绘制直线、曲线、弧线等各种复杂的图形。

基本语法

<path
  d="path-data"            <!-- 定义路径的路径数据 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->
/>

属性解析

d：定义路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。常用的路径命令包括：M（移动到）、L（直线到）、H（水平线到）、V（垂直线到）、C（三次贝塞尔曲线）、S（光滑曲线）、Q（二次贝塞尔曲线）、T（光滑二次贝塞尔曲线）、A（圆弧）、Z（闭合路径）等。
fill：定义路径的填充颜色。
stroke：定义路径的描边颜色。
stroke-width：定义路径的描边宽度。

示例 1：绘制一个简单的三角形路径

以下代码绘制了一个橙色填充、黑色描边、宽度为 2 像素的路径，其路径数据为移动到 (50, 50)，然后依次连接到 (150, 50) 和 (100, 150)，最后闭合路径。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 50 L 150 50 L 100 150 Z" fill="orange" stroke="black" stroke-width="2" />
</svg>

示例 2：绘制一个二次方贝塞尔曲线

下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 100 200 Q 150 100 200 200" stroke="black" fill="transparent" />
</svg>

示例 3：绘制一个复杂的路径

以下代码展示了如何使用多种路径命令绘制一个复杂的路径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" stroke="black" fill="red" />
</svg>

总结

通过本文的学习，您应该已经掌握了如何使用 SVG 绘制椭圆、直线、多边形、多段线和路径。这些基本图形是 SVG 中非常重要的组成部分，通过灵活运用这些元素，您可以创建出丰富多彩的矢量图形。希望本文对您的 SVG 学习之路有所帮助！