理解svg路径的绝对路径与相对路径

马黑黑

先了解 svg 路径的语法结构：

    <path d="路径描述" ... />

其中，d 是一个关键属性，用以描述路径。比如一条高度为100个像素单位的竖线：

    d="M 20 30 V 130"

再如一条长度为200的横线：

    d="M 20 10 H 220"

上述路径的指令中，M 表示 MoveTo，移动到的意思。它表示画笔的起笔处，也是要画的图形的起点，后面带的两个数字是起点的（x,y）坐标点。V 表示画竖线，H 表示画横线，上面的例子都用了大写字母，表示使用的是绝对路径：它针对 svg 左上角坐标（0,0）而言，坐标系以此为基准。例中，V 和 H 仅需要一个对应的坐标，V画的是竖线，需要的是线条终点的Y坐标，即参照从Y坐标 0 到Y坐标的什么地方；H画横线，仅需要线条终点的X坐标，即参照X坐标 0 画到X坐标的什么地方。V 和 H 还可以使用小写方法，小写时，是相对路径，相对路径以上一次画笔所在的位置为基准绘制小写指令的图形。

请看例子：

<svg style="border: 1px solid;">

<path d="M 50 20 H 250" stroke="green" />

<path d="M 50 40 h 200" stroke="red" />

</svg>

效果：

两条线长度一样，但 H 所带的终点坐标值和 h 所带的终点坐标值不一样，试细细比较、理解。

我们再添加两条线，这是折线，在自己尝试之前根据代码想象一下折线部分的朝向与长度：

<path d="M 50 60 h 220 V 20" fill="none" stroke="purple" />

<path d="M 50 80 h 220 v 20" fill="none" stroke="purple" />

然后尝试去理解 V 和 v 产生的折线为什么区别如此之大。

梦缘

谢谢老师的精彩分享，感谢有您！

马黑黑

梦缘 发表于 2022-9-9 11:10
谢谢老师的精彩分享，感谢有您！

红影

看这个发出两条红绿线，绝对路径好理解，也就是从设定的点出发画横线。
相对路径很难理解，仿佛是从Y40的地方先画了50，再移动到50 40的地方，然后画了200 ？

这两条同样位子同样长度的线段应该是最简单的表现方式，却是很难明白相对路径是怎么实现的。
或者更简单点理解，就是相对路径需要加上起点的X值。

红影

V 和 v 产生的折线不但长度不同，甚至连方向都不同。

红影

        <path d="M 50 60 h 220 V 20" fill="none" stroke="purple" />

        <path d="M 50 80 h 220 v 20" fill="none" stroke="purple" />

这两句，看最后落点的坐标值的话，第一个是（270,20）
            第二个是（270,100）

马黑黑

红影 发表于 2022-9-9 12:51
这两句，看最后落点的坐标值的话，第一个是（270,20）
            第二个是（270,100）

嗯，画一下检验

红影

看起来相对路径就要把起点的值加上。绝对路径不加。

马黑黑

红影 发表于 2022-9-9 12:31
看这个发出两条红绿线，绝对路径好理解，也就是从设定的点出发画横线。
相对路径很难理解，仿佛是从Y40的 ...

相对路径从上一个点算起，比如原例中，

d="M 50 40 h 200"

h 表示用相对路径画水平线，它的上一个点是 M 50 40 中的 50，h 要画一根长200的线，X坐标就是200，因为它的起点从上一个点开始，不考虑svg原坐标（0，0）

马黑黑

红影 发表于 2022-9-9 12:57
看起来相对路径就要把起点的值加上。绝对路径不加。

相对路径不用加值，要画多长或多高就设定直接数

红影

马黑黑 发表于 2022-9-9 12:54
嗯，画一下检验

画过了，看到朝两个方向，完全没想到

红影

马黑黑 发表于 2022-9-9 12:58
相对路径从上一个点算起，比如原例中，

d="M 50 40 h 200"

嗯，一个是在原坐标系里，一个是在以起点为参照的平移坐标系里。现在知道了。

红影

马黑黑 发表于 2022-9-9 13:00
相对路径不用加值，要画多长或多高就设定直接数

嗯，并不是加值，而是参照点变了，相对于原坐标系感觉像加过的。

马黑黑

红影 发表于 2022-9-9 17:04
嗯，并不是加值，而是参照点变了，相对于原坐标系感觉像加过的。

所以它叫相对路径，它的起点永远是画笔的上一个位置

马黑黑

红影 发表于 2022-9-9 17:03
嗯，一个是在原坐标系里，一个是在以起点为参照的平移坐标系里。现在知道了。

试过就能更好理解

马黑黑

红影 发表于 2022-9-9 17:02
画过了，看到朝两个方向，完全没想到

所以需要动动手，这样理解会很透彻

红影

马黑黑 发表于 2022-9-9 17:30
所以它叫相对路径，它的起点永远是画笔的上一个位置

嗯嗯，原来大小写居然有这么大的区别呢。

红影

马黑黑 发表于 2022-9-9 17:30
试过就能更好理解

是啊，亲眼看到图形更直观。

红影

马黑黑 发表于 2022-9-9 17:31
所以需要动动手，这样理解会很透彻

谢谢黑黑，现在这个功能弄明白了

马黑黑

红影 发表于 2022-9-9 20:27
谢谢黑黑，现在这个功能弄明白了