如何将缩放的SVG元素置于点上？

Question

我一直坚持这个问题。我有一个SVG画布，我可以平移（使用transform:translate）和缩放（使用transform:scale）。

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

然而，在规模上，这似乎已经分崩离析，我无法找出让它发挥作用的公式。在 this JSFiddle 上，您可以看到我的设置。为简单起见，这仅以X为中心，而不是Y.

我有3个SVG画布，每个画布都有编程偏移和缩放，就像在包裹元素<g class="transform" transform="translate(1, 0) scale(0.5)">中一样。这就是我在我的应用中平移和缩放的方式。我在画布上有一点我想要集中注意力。在getSvgOffsetToCenterPoint顶部定义了一个函数，这是我试图找出的公式。

蓝线使用CSS遍历每个svg元素的中心。红点应在所有三个刻度的蓝线上对齐。但正如你所看到的，我的公式（以及我尝试的任何变化）似乎并不满足。

Answer 1

花了一段时间才弄清楚发生了什么，但我让它发挥作用。这是更新的小提琴：http://jsfiddle.net/eukxumtn/8/。

首先，我将比例更改为更容易思考的内容，从pointX计算中删除了半径的加法，以使用圆的中心而不是边缘，并设置translation零，看看我们从哪里开始。

看起来视觉大小和位置受比例影响，但翻译需要在原始坐标系中进行。

以大点为例（我将其比例改为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计算中，那么您现在正在计算圆的右边缘而不是中心的平移，并且它可以根据需要运行。

如果我以后有一段时间，我会回过头来看看我是否可以在文档中找到这种行为的解释。