SVG路径,这是一个立方贝塞尔曲线吗?

时间:2012-09-03 00:30:13

标签: svg

这是一个由两部分组成的问题:

  1. 下面的第一个代码部分(由Adobe Illustrator制作)是否代表 SVG文件中的Cubic Bezier曲线?
  2. 如果是这样,小写Cs后面的每个数字在第一个(Adobe Illustrator)示例中代表什么?

    Adob​​e Illustrator示例:

  3. <path style="fill:none;stroke:#00FF00;stroke-width:0.5102;stroke-linecap:round; stroke-linejoin:round;" d="M223.827,404.942 c-6.741,6.32-7.083,16.908-0.762,23.649l0,0c0.184,0.201,0.561,0.577,0.762,0.762" />

    以下是 w3

    的示例的一部分
    <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                           S400,300 400,200" />
    

    在第二个W3示例中,我理解'M'后面的数字表示起始x,y坐标,大写字母'C'表示绝对定位。关于XY的分组,W3示例中的模式似乎相当明显。但是,我不知道如何制作Adobe Illustrator示例,其中的组以负号分隔,而不是逗号,例如:16.908-0.762 Adob​​e Illustrator示例中遵循小写Cs的编号序列如何解析和分组,以及第一个(Adobe Illustrator)示例中每个数字代表什么?

1 个答案:

答案 0 :(得分:3)

1的答案是肯定的。

至于2 ......

在路径语法中,空格和逗号是可选的。 16.908-0.762一次解析一个字符,因此解析器必须知道当它到达 - 符号时16.908是一个数字但16.908-不是,因此 - 符号必须是下一个数字的开头-0.762

插图示例中有三对数字。添加可选空格使其更清晰......

c -6.741,6.32 -7.083,16.908 -0.762,23.649

语法为here