关于语言规范:SVG路径规范:moveTo和implicit lineTo

SVG path spec: moveTo and implicit lineTo

我正在尝试编写一个小的SVG路径分析器/规范化器,最后一个问题是规范:

据我所知,大多数命令支持其他隐式命令,当它们支持其他隐式命令并且处于相对模式时,"当前点"将在最后一个隐式命令之后更新,而不是在它们之间更新。

但是"moveto"命令是一种特殊的命令,允许隐式的"lineto"命令。虽然"lineto"命令本身只会在最后一个隐式命令之后更新"当前点":

Draw a line from the current point to the given (x,y) coordinate which
becomes the new current point. L (uppercase) indicates that absolute
coordinates will follow; l (lowercase) indicates that relative
coordinates will follow. A number of coordinates pairs may be
specified to draw a polyline. At the end of the command, the new
current point is set to the final set of coordinates provided.

我不知道"moveto"和附加的"lineto"有什么作用。提取SVG路径规范:

Start a new sub-path at the given (x,y) coordinate. M (uppercase)
indicates that absolute coordinates will follow; m (lowercase)
indicates that relative coordinates will follow. If a moveto is
followed by multiple pairs of coordinates, the subsequent pairs are
treated as implicit lineto commands. Hence, implicit lineto commands
will be relative if the moveto is relative, and absolute if the moveto
is absolute. If a relative moveto (m) appears as the first element of
the path, then it is treated as a pair of absolute coordinates. In
this case, subsequent pairs of coordinates are treated as relative
even though the initial moveto is interpreted as an absolute moveto.

尤其是最后一句令人困惑。

更糟糕的是,在svgtiny路径规范中,他们编写了另一个描述,而其他几乎都是相同的:

A new sub-path at the given (x,y) coordinate shall be started. This
shall also establish a new current point at the given coordinate. If a
relative 'moveto' (m) appears as the first element of the 'path', then
it shall treated as a pair of absolute coordinates. If a 'moveto' is
followed by multiple pairs of coordinates, the subsequent pairs shall
be treated as implicit 'lineto' commands.

这是否意味着"当前点"是在两者之间更新的(这将与其他所有内容不一致),或者只是在较新版本中更正的模糊描述?


我觉得一切都很清楚。

下面是两种模式的图示,用于绘制两个方形(100px×100px)框。第一个使用绝对坐标,第二个使用相对坐标。如规范所述,当第一个坐标以小写"m"指定时,它将被视为绝对坐标,但其后的所有坐标都将被视为相对坐标。

1
2
3
4
5
6
7
8
<svg widtn="250" height="140" viewBox="0 0 250 140">
  <g fill="none" stroke-width="5">
    <!-- 1. Move with implicit LineTo (absolute) -->
    <path d="M10,10 110,10 110,110 10,110z" stroke="blue" />
    <!-- 2. Move with implicit LineTo (relative) -->
    <path d="m120,10 100,0 0,100 -100,0z" stroke="red" />
    </g>
  </svg>