html - 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>