请解释SVG路径命令和坐标

时间:2016-11-07 13:22:00

标签: svg svg-path

在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代表的内容吗?

2 个答案:

答案 0 :(得分:4)

我认为一些混乱来自于格式允许将各个参数分离到各种路径操作数的技巧。所以在这个例子中:

  

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

您会看到参数

  • 用逗号分隔,如M(ove)65.32,48.38 ......
  • 用连字符(减号)分隔,如c(ubic 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行,一个C带有18个参数,它意味着3个立方贝塞尔数。

这是为了最大限度地减少SVG中浪费的空间,而不仅仅是为了让它难以阅读。

答案 1 :(得分:2)

SVG d标记的<path>属性包含一系列说明或说明,这些说明或说明经过处理后可创建SVG的整体形状。这些说明可以是不同类型的:

  1. Moveto ::重新启动其他地方的路径(Mm语法)
  2. Lineto ::绘制一条直线(Ll语法,或HVhv
  3. Curveto ::绘制一个三次贝塞尔曲线(Cc语法)
  4. Arcto ::绘制椭圆曲线(Aa语法)
  5. ClosePath ::直线绘制到路径的开头(Zz语法)
  6. 大写字母语法表示给出绝对位置值。小写语法意味着相对位置值遵循,意味着从当前控制点向下和向右找到后续坐标。

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

    关于你要问的第一个坐标......

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

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

    关于你要问的第二组坐标......

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

    这些值中的点是小数点。

    如果你取d属性并将其分开,根据文档中定义的参数个数,每个命令,指令集变为much more readable

    有关d属性的更多信息,see herehere

    有关贝塞尔曲线的更多信息,请see here