SVG路径命令"s"和"t"

650*_*502 7 svg

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

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

立方弧示例

  • cp 目前的观点
  • ip 隐式控制点计算镜像前一个弧的最后一个控制点
  • ep 明确的控制点
  • fp 弧的最后一点

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

在官方文档中,我发现这个不清楚,并且在这些情况下没有使用相对坐标的示例.

650*_*502 10

规则是

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

  2. 在命令"链"的情况下,当给出多个坐标而不重复命令时,在每次重复之后更新基点

例如简单的路径

m 100,100 100,0 0,100 -100,0 0,-100
Run Code Online (Sandbox Code Playgroud)

描述了从(100,100)到(200,200)的正方形

简单的相对路径

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

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

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

m 100,100 c 25,25 75,25 100,0 s 25,125 0,100 -75,-25 -100,0
Run Code Online (Sandbox Code Playgroud)

bezier arcs的例子

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

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


Rog*_*and 2

这里的文档指出,大写的S需要绝对坐标,而小写的s需要相对坐标。T(绝对)和t(相对)与此类似。

编辑- 相对于当前观点 - 抱歉,应该是明确的。上面链接的同一文档包括以下内容:

对于命令的相对版本,所有坐标值均相对于命令开始处的当前点