请解释SVG路径命令和坐标



在SVG文件中,我找到了如下路径:

<path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/>

谁能解释一下坐标48.38c5.65-0.9518.92-3.42c2.05-0.45代表什么?

我认为一些混淆来自于格式允许将单个参数与各种路径操作数分开的技巧。在这个例子中:

M65.32 c5.65 48.38 - 0.95, 12.61 - -2.46, 18.92 - -3.42 c2.05 - 0.45, 4.13 - -0.5, 6.23 - -0.13

可以看到参数

  • 用逗号分隔,如M(ve)65.32,48.38…
  • 用连字符(减号)分隔,如c(public bezier)2.05-0.45…
  • 由新的操作数分隔,如…48.38c5.65…
  • 你还会看到参数用空格分隔,而不是逗号
  • 如果前面的参数中有一个句点,你甚至可以看到由前置句点分隔的参数
  • 有时你会看到3.22e-9中的科学符号参数,以消除零

由于每一种操作数恰好需要一定数量的参数(M,L,T需要2;H V需要1;Q,S需要4;C需要6;A需要7;和Z需要0),您将看到省略操作数的情况。如果你看到后面有4个参数的L,它实际上意味着2条直线,后面有18个参数的C意味着3次贝塞尔。

这一切都是为了尽量减少SVG中浪费的空间,而不仅仅是为了使其难以阅读。

SVG的<path>标签的d属性包含一系列指令或描述,这些指令或描述被处理以创建SVG的整体形状。这些指令可以是不同的类型:

  1. Moveto::在其他地方重新启动路径(Mm语法)
  2. Lineto::画一条直线(Ll语法,或HV,或hv)
  3. Curveto::绘制三次贝塞尔曲线(Cc语法)
  4. Arcto::绘制椭圆曲线(Aa语法)
  5. ClosePath::画一条直线到路径的起点(Zz语法)

大写字母语法表示给出了绝对位置值。小写语法表示后面跟着相对位置值,也就是说,从当前控制点向下和向右找到后续坐标。

在SVG的d属性中提供的说明以大写的M开头,它表示Moveto命令的绝对位置值。但是也有小写的c命令,它们表示Curveto指令集的相对值。

关于你所询问的第一个坐标…

Moveto命令有两个参数。在您要查询的第一个值的第一段中,48.38Moveto命令的y轴参数(紧随65.32的x参数)。剩余的c5.65-0.95是新的Curveto指令集的开始。

Curveto命令有三个参数,由xy对组成,每个由破折号(-)分隔。因为它是用小写的c给出的,所以后面的值是相对的。第一对是曲线开始的控制点,第二对是曲线结束的控制点,第三对是定义曲线开始的当前点的坐标。

关于你所询问的第二组坐标…

18.92-3.42是第一个Curveto命令定义的当前点(第三个参数),c2.05-0.45是下一个Curveto命令的第一个参数,该命令控制该bezier曲线的起点。

这些数值中的点是小数点。

如果您将d属性拆分,根据文档中定义的每个命令的参数数量,该指令集将变得更具可读性。

有关d属性的更多信息,请参阅此处和此处。

有关bezier曲线的更多信息,请参阅此处

最新更新