html - SVG坐标系旋转倾斜 Angular

Question

我认为我对 SVG 有相当的了解，包括视口(viewport)、viewBox 和用户坐标系。

在下面的第一个示例中，我们使用与视口(viewport) 具有相同宽高比的viewBox。正如预期的那样，用户坐标系旋转不会扭曲任何 Angular 。

在示例二中，我们将viewbox 设置为与viewport 不同的纵横比。换句话说，当将 viewBox 映射到 viewport 时，形状的纵横比不会保持不变。右下角不会因这种缩放而变形，这是有道理的，因为坐标系原点位于 (0,0)。

然而，当我们在示例二中旋转用户坐标系时，右下角发生了扭曲。这在示例一中不会发生。

编辑 1: 需要说明的是，问题与上一个示例中的右下角有关。在旋转之前，但在使用 viewBox 拉伸(stretch)之后， Angular 为 90%。然而旋转后，它不再是 90%。

为什么非均匀缩放的三 Angular 形在旋转时会失去 Angular ？

示例一(统一比例)

body {
  height: 500px;
}

svg {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px);
        animation: 2s ease-in 1s 1 normal forwards rotate-down;
        fill: green;
      }
      
      @keyframes rotate-down {
        0% {
          transform: translate(100px, 0px) rotate(0deg);
        }
        100% {
          transform: translate(100px, 0px) rotate(45deg);
        }
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>

示例二(非均匀比例)

body {
  height: 500px;
}

svg {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px);
        animation: 2s ease-in 1s 1 normal forwards rotate-down;
        fill: green;
      }
      
      @keyframes rotate-down {
        0% {
          transform: translate(100px, 0px) rotate(0deg);
        }
        100% {
          transform: translate(100px, 0px) rotate(45deg);
        }
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>

---

编辑 2(澄清图片):

下面我们看到三 Angular 形在 viewBox 被添加(因此缩放和平移)之后，之前 旋转。右下角为 90 度。

下面我们看到三 Angular 形 after 添加了 viewBox(因此缩放和平移)，和 旋转之后。右下角不再是 90 度。

---

编辑 3:

我终于弄明白了。

下面是一个解释详细信息并链接到相关资源的答案。

Answer 1

希望这个例子能告诉你发生了什么。

将鼠标悬停在 SVG 上以查看为什么拉伸(stretch)会改变 Angular 。

body {
  height: 500px;
}

svg {
  width: 200px;
  height: 400px;
  border: 1px solid red;
  transition: 1s width;
}

svg:hover {
  width: 600px;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px) rotate(45deg);
        fill: green;
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>