svg中“S”與“s”、“C”與“c”、“Q”與“q”的區別？

Question

誰能解釋一下 svg d 屬性中“S”和“s”、“C”和“c”、“Q”和“q”命令的區別，請幫忙，如果你能給出一個視覺效果就太好了例子。

Answer 1

小寫路徑命令字母是相對的，這意味着值是相對於先前定義的坐標的。

大寫值是絕對值，相對於 svg 坐標系的左上角。

就個人而言，雖然相對定位很有用，但我更喜歡絕對定位，因為我發現它更容易推理。

下面是一個示例，其中數值相同，但行為因絕對定位和相對定位而不同：

 svg { overflow: visible } path { stroke: black; fill: none; } div { width: 150px; float: left; }

 <div> <p>relative</p> <svg> <path d="m 0 0 l 90 30 10 10 0 40" /> </svg> </div> <div> <p>absolute</p> <svg> <path d="M 0 0 L 90 30 10 10 0 40" /> </svg> </div>