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>