svg中的<path>标签是什么
时间: 2024-02-22 14:58:00 浏览: 135
SVG 中的 `<path>` 标签用来定义形状,可以通过设置路径命令来创建线条、弧线、曲线等形状。
`<path>` 标签的 `d` 属性用来设置路径命令,具体的路径命令可以通过使用一些预定义的命令字符来实现,如下表所示:
| 命令字符 | 描述 |
| --- | --- |
| M | 移动到指定坐标 |
| L | 从当前点画一条直线到指定坐标 |
| H | 从当前点画一条水平线到指定 x 坐标 |
| V | 从当前点画一条竖直线到指定 y 坐标 |
| C | 从当前点画一条三次贝塞尔曲线到指定坐标 |
| S | 从当前点画一条平滑的三次贝塞尔曲线到指定坐标 |
| Q | 从当前点画一条二次贝塞尔曲线到指定坐标 |
| T | 从当前点画一条平滑的二次贝塞尔曲线到指定坐标 |
| A | 从当前点画一条弧线到指定坐标 |
| Z | 闭合路径 |
下面是一个例子,演示了如何使用 `<path>` 标签来创建一个简单的图形:
```
<svg width="200" height="200">
<path d="M 50 50 L 150 50 L 100 150 Z" fill="yellow" stroke="black" stroke-width="2" />
</svg>
```
这个例子定义了一个三角形,三个顶点的坐标分别为 (50, 50)、(150, 50) 和 (100, 150),填充颜色为黄色,边框为黑色,宽度为 2 像素。`<path>` 标签的 `d` 属性设置了路径命令,使用了 `M`、`L` 和 `Z` 命令来定义三角形的路径。
阅读全文