svg path路径之：M H V L

马黑黑 · 发表于 2023-9-23 20:41

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-9-23 21:38 编辑

svg，之前我们有过讨论，它基于XML，即 Extensible Markup Language（扩展标记性语言）。svg是 Scalable Vector Graphics 的缩写，意为可缩放矢量图形，顾名思义，它是用来做图像的。

svg可以作为一个html标签用于HTML，例如：

<div class="mydiv" style="width: 400px; height: 200px; border: 1px solid gray;">
<svg width="100%" height="100%">

</svg>
</div>

以上，svg作为div的一个子元素出现，它的宽高尺寸使用父元素的宽高，都是 100%。

svg可以画线、圆、椭圆、矩形等等形状，作为绘图，路径可能是最强大的，任何形状的东东都可以使用 path 来描述并呈现出来。path 是svg的一个子标签，语句结构举例如下：

<svg style="border: 1px solid">
<path d="M0 75 H300" fill="none" stroke="red"></path>
</svg>

可以把 path 看做是一个 svg 的子标签，它有诸多属性，d 是 data 的缩写，数据的意思，用于存储描述路径的数据，fill 是路径描述的形状的内部填充色（闭合区域填充），stroke 是路径边框的颜色。下面重点谈 d 属性值：

M 是 move（移动）的意思，M0 75 表示，将画笔移动到 {x,y} 坐标 {0,75} 处；H 是画横线指令（Horizontal 的缩写），H300 表示画一根横线，横线画到X坐标 300 处，而画线的起点，则是前面的定义，如M指令的画笔定位，或上一个结束的绘制指令终止点。

画竖线，请用 V 指令（Vertical 的缩写），V100 表示从画笔的上一个终结点画一根竖线到Y坐标 100 处。

画任意方向的直线，可用 L 指令（Line 的缩写），L 指令需要两个值，即 xy坐标值都需要，例如：

d="M10 10 L100 50"

上面这个路径数据表示，画笔先移动到 {10,10} 处，然后往 {100,50} 处画一根直线。

以上介绍的指令，M、H、V、L，都是用了大写。

使用大写表示使用绝对位置，比方说，H 100，画的横线是从上一个绘制动作终结点到父元素即svg画布的X坐标中 100px 的位置。

这些指令还可以使用小写，若使用小写，表示使用相对位置，例如，h 100，表示从画笔的上一个位置开始画一根长度为 100px 的横线，支持负数，负数表现往左画线（v指令则往上）。

最后给一个上述指令综合应用的示例代码，大家可以到 pencil code (52qingyin.cn) 运行查看效果：

<svg style="border: 1px solid">
<path d="M0 10 H300 L20 150 V100" fill="none" stroke="red"></path>
</svg>

更详细的介绍请参阅其他权威资料。