svg path路径之：M H V L
本帖最后由 马黑黑 于 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 代码 -->
</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>
更详细的介绍请参阅其他权威资料。
黒黑辛苦，今天小辣椒一面在看亚运会开幕式{:4_189:} 小辣椒 发表于 2023-9-23 21:39
黒黑辛苦，今天小辣椒一面在看亚运会开幕式
应该看看 对那个示例代码本来心里想了个形状，到pencil code里一看完全不是那么回事。
主要思路掉进小写的习惯里，其实大写的是以svg画布为参照的{:4_173:} 这个讲解非常仔细。谢谢黑黑的讲解{:4_199:} 讲这个是为了做非标进度条做准备的吧{:4_204:} 红影 发表于 2023-9-26 12:37
讲这个是为了做非标进度条做准备的吧
对，做自由进度条 红影 发表于 2023-9-26 12:36
对那个示例代码本来心里想了个形状，到pencil code里一看完全不是那么回事。
主要思路掉进小写的习惯里， ...
对，要弄清楚大小写的区别。大小写都可以用 红影 发表于 2023-9-26 12:36
这个讲解非常仔细。谢谢黑黑的讲解
MHVL指令应该是简单的 马黑黑 发表于 2023-9-26 13:08
对，要弄清楚大小写的区别。大小写都可以用
我好像特别习惯想到小写的路径，大写的还不习惯。 马黑黑 发表于 2023-9-26 13:09
MHVL指令应该是简单的
那个外边框都不用设置宽高啊，好像直接就跟着生成了。 马黑黑 发表于 2023-9-26 13:08
对，做自由进度条
先打个基础，然后对那个就更容易理解了呢。 红影 发表于 2023-9-26 22:22
先打个基础，然后对那个就更容易理解了呢。
也许吧，我尽量将这些指令再介绍一次 红影 发表于 2023-9-26 22:21
那个外边框都不用设置宽高啊，好像直接就跟着生成了。
player_css 可以设置width和height值。另外，svg有自己的默认尺寸，同时，插件也设定了默认尺寸。 红影 发表于 2023-9-26 22:20
我好像特别习惯想到小写的路径，大写的还不习惯。
使用相对绝对位置因人而异吧，或者，都可以的 马黑黑 发表于 2023-9-26 22:39
也许吧，我尽量将这些指令再介绍一次
嗯嗯，多弄几次也许我们就记得住了{:4_173:} 马黑黑 发表于 2023-9-26 22:40
player_css 可以设置width和height值。另外，svg有自己的默认尺寸，同时，插件也设定了默认尺寸。
原来是这样，还在想这个边框是怎么来的呢。 马黑黑 发表于 2023-9-26 22:41
使用相对绝对位置因人而异吧，或者，都可以的
二次贝塞尔曲线倒是习惯大写的格式。 红影 发表于 2023-9-27 12:48
原来是这样，还在想这个边框是怎么来的呢。
是常规的CSS代码，所以不额外说明 红影 发表于 2023-9-27 12:49
二次贝塞尔曲线倒是习惯大写的格式。
心中有数就成，无关大小写