实现 SVG 缩放/旋转变换（以及如何理解坐标系）

Question

所以我对 SVG 坐标系有点困惑。我正在做一个将 SVG 对象转换为多边形的项目（然后在 OpenGL 中显示）。我有所有的代码，包括矩形、圆形、路径（使用曲线近似）等，并将它们转换为每个对象的一组点。到目前为止，这一切都很好。

我现在正处于实施转换的阶段。我已经编写好所有矩阵函数并准备使用，但我对 translate(x,y) 与任何以 0,0 为中心的操作（主要是旋转和缩放）之间的关系感到困惑。

假设我们在 0,0 处有一个对象。 rotate(45, 100, 100) 等价于 translate(100, 100) rotate(45) translate(-100, -100)，但是如果我将对象移动到 100,100 并且旋转仍然应用在 0,0，这并不意味着旋转中心实际上相对于 -100,-100物体的原始位置？

我想我的问题是translate 如何影响对象的坐标系？似乎在某些情况下它用于将 0,0 移动到指定点不移动对象，而在其他情况下它用于移动对象。

我对坐标系的理解完全有缺陷吗？

Answer 1

我认为SVG specification 非常清楚地解释了coordinate transformations。每次转换都意味着将当前坐标与 3x3 矩阵相乘。您可以在transform attribute 中指定的最通用转换是自定义matrix(...)，而所有其他类型的转换（平移、旋转、缩放、倾斜）只是易于使用的快捷方式。最后，一切都以矩阵形式结束。

组合几个变换很简单，它只是意味着每个变换矩阵按顺序与其他变换矩阵相乘，跟踪所有变换意味着记住从这个乘法得到的最终 3x3 矩阵，并计算最终的坐标一个元素意味着只需将初始坐标的 3x1 矩阵与该 3x3 矩阵相乘。

所以，我的建议是只使用矩阵，忘记手动应用每个转换。