SVG path

SVG路径（SVG path）是一种定义图形的方式，它可以创建各种形状、颜色和线条，可以用于制作各种视觉效果和动画。本文将为您介绍SVG路径的语法及其各个组成部分的含义。

语法

SVG路径语法中基本上包含了两个指令：M（移动到）和L（线条），以及一个命令Z（结束路径）。

<path d="M x y L x1, y1, x2, y2 Z" />
  • M：移动指令，将路径的起点设置为给定的坐标。
  • L：线条指令，绘制一条直线从当前点到给定的坐标上。
  • Z：结束路径，并绘制一条线条连接结束点和路径的起点。如果路径不需要闭合，则可以跳过这个命令。

组成部分

SVG路径语法中，用逗号或空格来分隔不同的路径指令。每一条路径指令都可以由一条或多条路径子指令组成。

移动指令

移动指令（M）用于将当前点移动到给定的坐标上。当我们需要在画布上绘制一条新的路径或者需要抬起画笔重新开始绘画一段时，使用该指令。

M x y

在M指令后，分别指定了移动到的横向坐标x和纵向坐标y，该指令不会产生可见的图形输出。

线条指令

线条指令（L）用于在当前点与新的点之间绘制一条直线。

L x1 y1 x2 y2

在L指令后，分别指定新点的横向坐标x1和纵向坐标y1、第二个点的横向坐标x2和纵向坐标y2。我们发现，L指令既可以有一个子指令，也可以有多个子指令，通过连接多个线条指令，就可以绘制复杂的图形。

结束指令

结束指令（Z）用于结束路径，通常将它添加到路径指令的末尾。当所有的路径指令都已完成时，使用该指令可以将路径的起点连接到路径的结束点上，从而形成一个闭合的形状。

示例

下面我们以绘制一个三角形为例，使用SVG路径语法。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 90 L 50 10 L 90 90 Z" fill="none" stroke="black"></path>
</svg>

首先在SVG元素上定义了视口范围（viewBox），宽100、高100，然后定义了路径的指令，M指令将起点移动到(10,90)，L指令从起点绘制线条到(50,10)，再从(50,10)绘制线条到(90,90)，最后使用Z指令将路径闭合，形成一个三角形。

总结

SVG路径是一种非常强大的工具，能够实现各种各样的形状和视觉效果，更为重要的是，SVG路径语法非常简洁、易于理解，即使是初学者，掌握它也不是很困难。本文介绍了SVG路径的语法及其基本组成部分，希望读者能够通过本文了解和学习SVG路径。

SVG line SVG polygon