每個路徑都必須以moveto 命令開始

moveto、lineto和closepath

<path d="M 10 10 L 100 10z"/>

?

大寫字母命令的坐標(biāo)是絕對的，小寫字母命令的坐標(biāo)是相對的。其它情況：

1.z(closepath)命令沒有坐標(biāo)，它的大小寫形式效果相同。

2.如果使用小寫m（moveto）啟動路徑，它的坐標(biāo)會被解析為絕對位置，因?yàn)闆]有參照位置來計(jì)算相對位置。

?

水平線和垂直線很常用，足以成為快捷命令。路徑可以使用H 命令加絕對x 坐標(biāo)，或者h(yuǎn)命令加相對x 坐標(biāo)，來指定一條水平線。類似地，垂直線可以使用V 命令加絕對y 坐標(biāo)，或者v 命令加相對y 坐標(biāo)來指定。

下面的路徑繪制了一個寬度為15 單位、高度為25 單位的矩形。

<path d="M 12 24 h 15 v 25 h -15 z"/>

?

我們還可以在水平lineto 和垂直lineto 命令后面放置多個坐標(biāo)值，但只在使用線標(biāo)記時才會看到效果，H 25 35 45 和H 45 相同，v 11 13 15 和v 39 相同。

?

所有不必要的空白都可以消除。命令字母后面不需要空白，因?yàn)樗械拿疃际且粋€字母。數(shù)字和命令之間不需要空白，因?yàn)槊钭帜覆⒉荒茏鳛閿?shù)字的一部分。正數(shù)和負(fù)數(shù)之間也不需要空白，因?yàn)樨?fù)數(shù)的前置減號并不能作為正數(shù)的一部分。

?

圓弧命令以字母A（絕對坐標(biāo)的縮寫）或者a（相對坐標(biāo)的縮寫）開始，后面緊跟以下7個參數(shù)。

A 命令的7個參數(shù)：
? 點(diǎn)所在橢圓的x 半徑和y 半徑。
? 橢圓的x 軸旋轉(zhuǎn)角度x-axis-rotation。
? large-arc-flag，決定是繪制長弧線還是短弧線。
? sweep-flag，控制弧線的繪制方向，順時針或逆時針繪制弧線，得到的結(jié)果是一種“鏡像”效果
? 終點(diǎn)的x 坐標(biāo)和y 坐標(biāo)（起點(diǎn)由最后一個繪制的點(diǎn)或者最后一個moveto 命令確定）

?

轉(zhuǎn)載于:https://www.cnblogs.com/iloveyou-sky/p/5757612.html

總結(jié)

以上是生活随笔為你收集整理的svg笔记----------path篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。