“C”在 SVG 路径中意味着什么？

Question

path fill="none" stroke="#000000" d="M151.5,85.5c0-36.48,29.52-66,66-66"

谁能详细解释一下

d=""

吗？我能够理解

M

标签，但我无法理解

C

标签是什么？以及详细信息：

c0-36.48,29.52-66,66-66

Answer 1

检查规格。 c 是一个曲线命令。

Answer 2

c 表示基本曲线，然后你得到曲线的 B C 和 D 点的三个坐标，A 点是调用“c”之前绘制的线图形末端的最后一个点

Answer 3

“C”或“c”命令的结构是：

C (target-point) (beginning-control-point) (end-control-point)

额外的三元组只是曲线的额外部分。

更详细

d

是定义“路径”的 SVG 属性。

可以找到可用路径命令的概述：

• 在 MDN 上的参考 > SVG > 属性 > d >“路径命令” 和
• 在 w3.org 下 9.3.2。指定路径数据：‘d’属性

C

（绝对坐标）和

c

（相对坐标）描述了“贝塞尔曲线”。

您需要了解贝塞尔曲线才能理解“C”/“c”命令。

这些命令的描述如下

• “MDN 上及下的三次贝塞尔曲线
• 9.3.6。 w3.org 上的三次贝塞尔曲线命令。

C

命令的构建方式如下：

C x,y x1,y1 x2,y2

地点：

• x,y

  是曲线的终点
  （起点为当前位置，例如由“M”或其他先前命令定义）

• x1,y1

  是曲线起点的控制点

• x1,y1

  是曲线末端的控制点

一个最基本的例子是：

<path d="M 0,0 C 100,0 100,0 100,50" />

额外的

x,y x1,y1 x2,y2

三元组只是线路的附加段，即这两条路径完全相同：

<path d="M 0,0 C 100,0 100,0 100,50 C 100,100 100,100 50,100" />

<path d="M 0,0 C 100,0 100,0 100,50 100,100 100,100 50,100" />