SVG路径命令“s”和“t”

时间:2013-04-07 08:58:57

标签: svg

实现"s"(相对三次贝塞尔弧)和"t"(相对二次贝塞尔弧)命令时,隐含定义的控制点的坐标是否用作下一个相对坐标的基础?

换句话说,考虑以下立方弧:

cubic arc example

  • cp当前点
  • ip隐式控制点计算镜像前一个弧的最后一个控制点
  • ep显式控制点
  • fp弧的最后一点

ep的相对坐标应该用作基础ip(隐含点)还是相对于cp(路径的当前点)?

在官方文档中,我发现这个不清楚,没有使用相对坐标的例子。

2 个答案:

答案 0 :(得分:10)

规则是

  1. 使用相对模式时,坐标相对于命令开头的当前点

  2. 如果在没有重复命令的情况下给出多个坐标时命令为“链”,则在每次重复后更新基点

  3. 例如简单路径

    m 100,100 100,0 0,100 -100,0 0,-100
    

    描述了从(100,100)到(200,200)

    的正方形

    simple relative path

    (如果为“m”命令提供了多个坐标对,则显示为红色的l“line-to”命令是隐式的

    需要注意的重点是坐标的相对“基数”在每个转折点都会更新。这在文档中有点欺骗,因为m命令的语法被描述为接受(x,y)+作为参数,因此读者可能会被欺骗认为相对基数只会在整个序列的末尾发生变化分数。

    现在让我们考虑贝塞尔立方路径

    m 100,100 c 25,25 75,25 100,0 s 25,125 0,100 -75,-25 -100,0
    

    bezier arcs example

    通过镜像最后一个控制点自动计算两个红色控制点。红色s命令是隐式的,因为有四个点跟s

    对于三次贝塞尔弧命令,两个控制点和终点相对于相同的起始点(它们不是相对于前一个序列),但在每个弧处,相对坐标计算的基点被更新。

答案 1 :(得分:2)

documentation here表示大写 S 需要绝对坐标,而小写 s 需要相对坐标。类似于 T (绝对)和 t (相对)。

编辑 - 相对于当前点 - 抱歉,应该是明确的。与上述相关的同一文件包括以下内容:

  

对于命令的相对版本,所有坐标值都相对于命令开头的当前点