为什么不 translate(${x},${y}) 和 translate(${-x},${-y}) 取消？答案

【问题标题】：Why don't translate(${x},${y}) and translate(${-x},${-y}) cancel out?为什么不 translate(${x},${y}) 和 translate(${-x},${-y}) 取消？
【发布时间】：2020-02-14 16:40:49
【问题描述】：

这是来自https://observablehq.com/@d3/non-contiguous-cartogram 的sn-p，它控制状态形状的转换。

function transform(d, year) {
  const [x, y] = path.centroid(d);
  return `
    translate(${x},${y})
    scale(${Math.sqrt(data.get(d.id)[year])})
    translate(${-x},${-y})
  `;
}

既然x 和y 是常量，那么translate(${x},${y}) 和translate(${-x},${-y}) 不应该取消吗？

此外，为什么这种机制将质心固定在原来的位置？

【问题讨论】：

第二个翻译按上面一行的比例缩放。
如果一个孩子向前一步，一个成年人向后一步，你会在同一个地方结束吗？缩放步数后，它们的大小就不同了。

标签： d3.js svg css-transforms svg-transforms

【解决方案1】：

了解 SVG 转换是连续应用的，即顺序确实很重要，这一点很重要。您不能只是将数字相加来合并各种转换定义的列表。用spec的话来说：

‘transform’属性的值是一个，它被定义为一个变换定义的列表，按照提供的顺序应用。

该列表的每个变换定义都操作坐标系，该坐标系是所有后续变换的基础。尽管在您的示例中，平移名义上在相反方向上的数量相同，但它们不会抵消，因为在两者之间发生的缩放会沿途改变坐标系。因此，第二次平移与第一次平移的距离不同。

要了解为什么这些变换将质心保持在原位，更正式地写下它们会有所帮助。给定质心的坐标 (x_c, y_c) 和比例因子 k 我们可以把它们写成：

x ↦ x_c + k (x - x_c)
y ↦ y_c + k (y - y_c)

每个原始点 (x, y) 都映射到质心（第一项），然后向外移动到其原始位置，但它只移动了原始距离的缩小部分（第二项）。

将质心本身插入这些规则会显示第二项抵消，它将质心保持在其原始位置，从而将整个变换集中在质心上：

x_c ↦ x_c + k (x _c - x_c) = x_c
y_c ↦ y_c + k (y_c - y_c) = y_c

【讨论】：