谈论图形或 svg 时,什么是用户坐标系

what is a user coordinate system when talking about graphics or svg

我正在阅读有关平移和缩放 svg 图像的内容,并且不断遇到表达式

new user coordinate system

例如 this post

上面写着

A new user space (i.e., a new current coordinate system) can also be established by specifying transformations

我大致明白它的意思,它是在新的原点创建一个新的用户坐标系,但我真的想要一个好的定义。

谁能提供一个

听起来你基本上明白了它的要点。

SVG 以初始用户坐标系开始,该坐标系1:1与视口坐标系相匹配。*原点 (0,0) 位于视口的左上角。

如果容器元素(例如<g>)应用了transform,那么我们认为它建立了一个新的用户坐标系.该容器元素内的所有子元素都不知道它们在页面的其他地方有一个位置。它的 (0,0) 可能根本不在视口的左上角。它可能在不同的角度。并且它可能会相对于其父级的用户坐标系进行缩放或倾斜。父坐标系中的1个单位,这个可能是5个

那么这为什么有用?好吧,在最简单的层面上,这是将一组形状移动到页面上不同位置的简单方法。有些设计,您可能希望构建,如果您将它们的中心设计在 (0,0),然后将它们移动到它们的最终位置,则可能更容易绕过您的头脑。想想星形,或对称的形状。

但您也可以拥有一整套嵌套的用户坐标系。想象一个 SVG 代表一个人的手臂,关节位于肩部、肘部和腕部。

<g id="shoulder" transform="...">
  <path .../><!-- upper arm -->

  <g id="elbow" transform="...">
    <path .../><!-- lower arm -->

    <g id="wrist" transform="...">
      <path .../><!-- hand -->
    </g>
  </g>
</g>

像这样的安排对于制作动画非常有用。您可以将肘部定位在您选择的任何角度。然后,如果你旋转肩膀,整个手臂就会保持在现有的姿势中。手臂的下部不关心上部的位置或角度。

如果它们不是这样嵌套的,每次肩膀移动时,您都必须明确更新小臂和手的位置。并在每次移动下臂时重新定位手。

所以像这样的嵌套变换树是大多数图形场景描述文件中的标准。 2D 和 3D 都可以。

我希望这个解释对您有所帮助。

* 当然,除非 SVG 有一个 viewBox。这将导致初始用户坐标系被转换,以便 viewBox 适合视口。