html - 如何将缩放的 SVG 元素集中在一个点上？

Question

我已经被这个问题困扰了一段时间了。我有一个 SVG Canvas ，可以平移(使用 transform:translate )和缩放(使用 transform:scale )。

我想将 SVG Canvas 在任何元素上任意居中。我认为这很容易，因为我知道比例因子、居中的绝对点坐标以及未缩放的 SVG 的全宽度 Canvas 。例如，要以 (0, 0) 为中心，您只需移动 transform:translate至( svgWidth / 2, svgHeight / 2 )

但是，从规模来看，这似乎会崩溃，而且我无法找出使其发挥作用的公式。关于this JSFiddle 你可以看到我的设置。为简单起见，这仅以 X 为中心，而不以 Y 为中心。

我有 3 个 SVG Canvas ，每个 Canvas 都有一个编程偏移和比例，如包装元素 <g class="transform" transform="translate(1, 0) scale(0.5)"> 所示。 。这就是我在应用程序中进行平移和缩放的方式。我想在 Canvas 上有一个点作为中心。顶部定义了一个函数 getSvgOffsetToCenterPoint这就是我正在尝试找出的公式。

蓝线使用 CSS 穿过每个 svg 元素的中心。红点应在所有三个比例下与蓝线对齐。但正如您所看到的，我的公式(以及我尝试的任何变体)似乎并不能满足这一点。

Answer 1

我花了一段时间才弄清楚发生了什么，但我成功了。这是更新的 fiddle :http://jsfiddle.net/eukxumtn/8/ .

首先，我将比例更改为更容易理解的值，从 pointX 计算中删除了半径的添加，以使用圆心而不是边缘，并设置 >翻译为零，看看我们从哪里开始。

看起来视觉大小和位置受到比例的影响，但平移需要发生在原始坐标系中。

以大点为例(我将其比例更改为1.5)。它的初始位置是 50，但缩放后看起来它的初始位置是 75 (1.5 * 50 = 75)。您希望它看起来像在 100 处，因此您需要将其移动到两者之间的视觉距离 (100 - 75 = 25)。因此平移计算变为:

function getSvgOffsetToCenterPoint( pointX, svgWidth, svgScale ) {
    var initialPositionScaled = svgScale * pointX;
    var desiredPosition = svgWidth / 2;
    return desiredPosition - initialPositionScaled;
}

如果您将+ 10放回pointX计算中，您现在正在计算圆的右边缘而不是中心的平移，并且它可以工作根据需要。

如果稍后有时间，我会回头看看是否可以在文档中找到此行为的解释。