第 6 章 坐标系统变换

translate 变换

<use> 标签的 x 和 y 其实是 transform 属性的一种简写形式

translate 的工作原理：获取图形的网格坐标，让将其移动到画布的新位置（并不是想象中的移动某个元素）

translate 变换永远不会改变图形对象的网格坐标，但是它会改变网格坐标在画布上的位置

scale 变换

scale 的工作原理：将图形对象的网格坐标进行缩放，但是坐标原点位置不会改变

• scale 变换永远不会改变图形对象的网格坐标或者它的笔画宽度，但是会改变对应画布上的网格坐标的大小
• SVG 在计算形状的坐标之前，会先对坐标系统应用变换

变换序列

一个图形对象可以做多个变换，只需要将多个变换通过空格或逗号分割，依次放入 transform 属性即可

变换序列的顺序会影响最终结果

技巧：笛卡尔坐标系统转换

如果从其他系统传输数据到 SVG，可能需要处理使用笛卡尔坐标表示数据的矢量图形

在笛卡尔坐标系统中，原点在左下角，往上往右为正。其 y 轴与 SVG 的默认坐标系统相反。因此需要重新计算坐标，可以使用变换序列让 SVG 做这些工作，而不是手动处理，步骤如下

• 在原始绘图中找到最大 y 坐标
• 将整个绘图放入 <g> 元素中
• 启用平移，根据最大 y 值向下移动坐标系统：transform="translate(0, y)"
• 缩放 y 轴 -1 倍，让它倒置翻转：transform="translate(0, y) scale(1, -1)

rotate 变换

默认坐标系统中，角度的测量是按顺时针增加，水平向右为 0 度

默认的旋转中心点（轴心点）为坐标原点 (0, 0)

rotate 的工作原理：旋转整个网格坐标

通常情况下我们想要的只是旋转某个图形自身而并非整个网格坐标，可以通过一系列变换实现：

translate(centerX, centerY) rotate(angle) translate(-centerX, -centerY)

但是有更简单写法可以实现

routate(angle, centerX, centerY)

其原理为：以指定的 x 和 y 点作为原点临时建立一个新的坐标系统执行旋转操作，然后重新建立原始坐标

技巧：围绕中心点缩放

SVG 中没有简单的方法实现围绕某个点缩放，但是可以使用一系列的变换来实现

translate(-centerX * (factor - 1), -centerY(factor - 1)) scale(factor)

skewX 和 skewY 变换

倾斜某个轴，新坐标系统的原点不会改变

skewX(angle) 会按照指定的角度“推动”所有 x 坐标，y 坐标不会改变。skewY(angle) 则相反

矩阵变换

matrix(a b c d e f) 指定一个 6 个值组成的矩阵变换，前面的所有变换都是矩阵变换的简写语法，但是矩阵变换难度较高，请参考本书附录 D 或其他相关资料

CSS 变换和 SVG

CSS 的变换比较熟悉了，此处列举一下 SVG 变换的注意点

• SVG1.1 变换使用用户单位和隐式角度（不需要指定角度单位，默认单位为“角度”）
• SVG1.1 变换是结构型属性
• SVG 中旋转原点只是 rotate() 函数的一部分，并且不能为缩放指定原点