理解svg路径的绝对路径与相对路径
本帖最后由 马黑黑 于 2022-9-9 09:10 编辑 <br /><br /><p>先了解 svg 路径的语法结构：<br><br> <path d="路径描述" ... /></p><p><br></p><p>其中，d 是一个关键属性，用以描述路径。比如一条高度为100个像素单位的竖线：<br><br> d="M 20 30 V 130"<br><br>再如一条长度为200的横线：<br><br> d="M 20 10 H 220"<br><br>上述路径的指令中，M 表示 MoveTo，移动到的意思。它表示画笔的起笔处，也是要画的图形的起点，后面带的两个数字是起点的（x,y）坐标点。V 表示画竖线，H 表示画横线，上面的例子都用了大写字母，表示使用的是<font color="#ff0000">绝对路径</font>：它针对 svg 左上角坐标（0,0）而言，坐标系以此为基准。例中，V 和 H 仅需要一个对应的坐标，V画的是竖线，需要的是线条终点的Y坐标，即参照从Y坐标 0 到Y坐标的什么地方；H画横线，仅需要线条终点的X坐标，即参照X坐标 0 画到X坐标的什么地方。V 和 H 还可以使用小写方法，小写时，是<font color="#ff0000">相对路径</font>，相对路径以上一次画笔所在的位置为基准绘制小写指令的图形。<br><br></p>
<p>请看例子：<br><br></p>
<p><svg style="border: 1px solid;"></p><p><span style="white-space:pre"> </span><path d="M 50 20 <font color="#ff0000">H</font> <font color="#0000ff">250</font>" stroke="green" /></p><p><span style="white-space:pre"> </span><path d="M 50 40 <font color="#ff0000">h</font> <font color="#0000ff">200</font>" stroke="red" /></p><p></svg><br><br></p>
<p>效果：<br><br></p>
<svg style="border: 1px solid;">
<path d="M 50 20 H 250" stroke="green"></path>
<path d="M 50 40 h 200" stroke="red"></path>
</svg>
<p><br>两条线长度一样，但 H 所带的终点坐标值和 h 所带的终点坐标值不一样，试细细比较、理解。</p><p><br></p><p>我们再添加两条线，这是折线，在自己尝试之前根据代码想象一下折线部分的朝向与长度：</p><p><br></p><p><span style="white-space:pre"> </span><path d="M 50 60 h 220 <font color="#ff0000">V</font> <font color="#0000ff">20</font>" fill="none" stroke="purple" /></p><p><span style="white-space:pre"> </span><path d="M 50 80 h 220 <font color="#ff0000">v</font> <font color="#0000ff">20</font>" fill="none" stroke="purple" /></p><p><br></p>
<p>然后尝试去理解 V 和 v 产生的折线为什么区别如此之大。</p> 谢谢老师的精彩分享，感谢有您！{:4_176:} 梦缘 发表于 2022-9-9 11:10
谢谢老师的精彩分享，感谢有您！
{:4_190:} 看这个发出两条红绿线，绝对路径好理解，也就是从设定的点出发画横线。
相对路径很难理解，仿佛是从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
嗯，画一下检验
画过了，看到朝两个方向，完全没想到{:4_173:} 马黑黑 发表于 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
所以需要动动手，这样理解会很透彻
谢谢黑黑，现在这个功能弄明白了{:4_204:} 红影 发表于 2022-9-9 20:27
谢谢黑黑，现在这个功能弄明白了
{:4_181:}