【发布时间】：2019-05-09 01:59:24
【问题描述】：
我认为我对 SVG 有相当的了解，包括 viewport、viewBox 和 用户坐标系。
在下面的第一个示例中，我们使用与 viewport 具有相同纵横比的 viewBox。正如预期的那样，用户坐标系旋转不会扭曲任何角度。
在示例二中，我们将 viewbox 设置为与 viewport 不同的纵横比。换句话说，当将 viewBox 映射到 viewport 时，不会保持形状的纵横比。右下角不会因这种缩放而失真，这是有道理的，因为坐标系原点位于 (0,0)。
然而，当我们在示例二中旋转用户坐标系时，右下角会发生扭曲。这在示例一中不会发生。
编辑 1： 需要明确的是，问题在于上一个示例中的右下角。旋转前，用viewBox拉伸后，角度为90%。然而，旋转后，它不再是 90%。
为什么不均匀缩放的三角形在旋转时会失去角度？
示例一（统一比例）
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（图片澄清）：
下面我们看到三角形 after viewBox 已添加（因此缩放和平移），但 before 旋转。右下角是90度。
下面我们看到三角形在 viewBox 被添加（因此被缩放和平移），和 在旋转之后。右下角不再是 90 度。
编辑 3：
我终于明白了。
以下是解释详细信息并链接到相关资源的答案。
【问题讨论】：
-
你在哪里看到扭曲的角度？三角形只是被拉伸了。您想如何拉伸三角形并同时保持 90 度角？拉伸正在改变角度（至少对于矩形而言）。
-
@Magnus 但它是做到这一点的拉伸。
-
@enxaneta 我完全了解
preserveAspectRatio的作用，以及viewBox结合该属性如何在当前用户坐标系（UCS）内缩放图形。这不是我的困惑所在。我认为首先应用了 viewBox，然后将其他转换应用于 viewBox 创建的修改后的 UCS 的副本。我已经通过规范的那部分几次，这就是我的理解的来源。 -
“transform 属性建立一个新的用户空间”。它在元素内建立了一个新的用户坐标系。但它不会覆盖当前的。它仍然受到在它之外应用的其他变换的影响。例如，无论 SVG 内部发生什么其他变换，SVG 中的所有内容都会受到 viewBox 变换的影响。
-
不要进行编辑以添加解决方案/答案 .. 而是回答您自己的问题