使用JavaScript设置SVG组的中心点

Question

在游戏中，我目前正在使您处于由节点构建的地图中，单击这些节点时您将转向其他节点。我当前的地图如下所示（用two.js创建的是一个svg组，其中每个圆和直线都是svg路径元素，例如：

// find node with value x
while(t->next != nullptr && t->next->data != x) { t++; }

// make sure the node actually exists
if(t->next != nullptr)
{
    // store temporary pointers
    auto* before_x = t;
    auto* _x = t->next;
    auto* before_x2 = _x + (n-1);
    auto* x2 = before_x2->next;

    // override the next ptrs in the preceding nodes
    before_x->next = x2;
    before_x2->next = _x;

    // swap the pointers inside of the two nodes in question
    auto* temp = _x->next;
    _x->next = x2->next;
    x2->next = temp;
}

地图如下所示：

标记为红色的节点表示您在区域/地图上的当前位置。我该如何重新定位svg组，以便当前玩家位置始终位于容器的中心，从而将整个地图移至左/右/上/下，并变为：

使用以下功能，我可以更改svg组的x，y坐标：

<path transform="matrix(1 0 0 1 553 120)" d="M 8 0 C 8 2.02 7.085 4.228 5.656 5.656 C 4.228 7.085 2.02 8 0 8 C -2.021 8 -4.229 7.085 -5.657 5.656 C -7.086 4.228 -8 2.02 -8 0 C -8 -2.021 -7.086 -4.229 -5.657 -5.657 C -4.229 -7.086 -2.021 -8 -0.001 -8 C 2.02 -8 4.228 -7.086 5.656 -5.657 C 7.085 -4.229 8 -2.021 8 0 Z " fill="#003251" stroke="#ebebeb" stroke-width="1" stroke-opacity="1" fill-opacity="1" visibility="visible" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" id="19"></path>

我还具有检测当前玩家位置节点坐标的功能，因此我尝试这样做：

function shiftMap(id_attr, offsetX, offsetY) {
    let elem = $(id_attr);
    if (elem) {
        let params = ' translate(' + offsetX + ',' + offsetY + ')';
        elem.attr('transform', params);
    }
}

不幸的是，位置不准确，地图到处移动/移动，超出了容器范围，等等。非常感谢您的帮助。谢谢！

提示：可能可以通过twojs锚点完成，但是我不确定如何做。此处更多信息：https://two.js.org/#two-anchor

Answer 1

您必须计算svg-group的边界框并移动该组，同时考虑该组本身的外部偏移和相对于中心节点的内部偏移。

假设您希望此新的随机节点位于组的中心，并以红色突出显示。

然后，您计算与容器相关的X和Y。假设X = 400，Y = 200。

然后，计算与容器相关的所有地图组的边界框。

在此示例中，Y1可能会是0，您必须在其中找到X1。如Two.js docs所述，尝试使用group.getBoundingClientRect(shallow)。假设“ X1 = 300”，“ Y1 = 0”。

让容器的W（宽度）= 1000和H（高度）= 700，让我们计算最终坐标：

finalX = (W/2) - (X + X1) = 500 - 700 = -200

finalY = (H/2) - (Y + Y1) = 350 - 200 = 150

这意味着您必须将地图组-200移动X（向左200），将150移动Y（向底部150）