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

Question

我正在阅读平移和缩放svg图像，并且不断遇到表达式

  

新用户坐标系

例如this post

它说明

  

还可以通过指定转换来建立新的用户空间（即新的当前坐标系）

我通常理解它的意思，它是在一个新的起点创建一个新的用户坐标系，但我真的很想一个好的定义。

任何人都可以提供一个

Answer 1

听起来您基本上已经掌握了要点。

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适应视口。