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>

svg 中 "S" 和 "s"、"C" 和 "c"、"Q" 和 "q" 之间的区别？

Difference between "S" and "s" , "C" and "c", "Q" and "q" in svg?

html

graphics

svg

bezier